DatePicker 日期选择器

    选择或输入日期，支持年、月、日期等类型，支持选择范围。

    基础用法

    设置属性 为 date 或 daterange 分别显示选择单日和选择范围类型。

    设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。

    DatePicker 日期选择器 - 图2

    快捷方式

    设置属性 options 对象中的 shortcuts 可以设置快捷选项，详见示例代码。

    其中 value 为函数，必须返回一个日期，如果是 daterange 类型，需要返回一个数组。

    value 接收任何正确的日期格式，比如 2016-12-24 或 12/24/16 都是正确的。

    1. <template>
    2.     <Row>
    3.         <Col span="12">
    4.             <DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
    5.         </Col>
    6.         <Col span="12">
    7.             <DatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    8.         </Col>
    9.     </Row>
    10. </template>
    11. <script>
    12.     export default {
    13.         data () {
    14.             return {
    15.                 options1: {
    16.                     shortcuts: [
    17.                         {
    18.                             text: 'Today',
    19.                             value () {
    20.                                 return new Date();
    21.                             },
    22.                             onClick: (picker) => {
    23.                                 this.$Message.info('Click today');
    24.                             }
    25.                         },
    26.                         {
    27.                             text: 'Yesterday',
    28.                             value () {
    29.                                 const date = new Date();
    30.                                 date.setTime(date.getTime() - 3600 * 1000 * 24);
    31.                                 return date;
    32.                             },
    33.                             onClick: (picker) => {
    34.                                 this.$Message.info('Click yesterday');
    35.                             }
    36.                         },
    37.                         {
    38.                             text: 'One week',
    39.                             value () {
    40.                                 const date = new Date();
    41.                                 date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
    42.                                 return date;
    43.                             },
    44.                             onClick: (picker) => {
    45.                                 this.$Message.info('Click a week ago');
    46.                             }
    47.                         }
    48.                     ]
    49.                 },
    50.                 options2: {
    51.                     shortcuts: [
    52.                         {
    53.                             text: '1 week',
    54.                             value () {
    55.                                 const end = new Date();
    56.                                 const start = new Date();
    57.                                 start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    58.                                 return [start, end];
    59.                             }
    60.                         },
    61.                         {
    62.                             text: '1 month',
    63.                             value () {
    64.                                 const end = new Date();
    65.                                 const start = new Date();
    66.                                 start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    67.                                 return [start, end];
    68.                             }
    69.                         },
    70.                         {
    71.                             text: '3 months',
    72.                             value () {
    73.                                 const start = new Date();
    74.                                 start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    75.                                 return [start, end];
    76.                             }
    77.                         }
    78.                     ]
    79.                 }
    80.             }
    81.         }
    82.     }
    83. </script>

    面板不联动

    开启属性 split-panels 后，左右两面板在切换年、月时不联动。

    1. <template>
    2.     <DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px"></DatePicker>
    3. </template>
    5.     export default {
    7.     }
    8. </script>

    DatePicker 日期选择器 - 图4

    多选

    开启属性 multiple 后，可以多选。

    1. <template>
    2.     <DatePicker type="date" multiple placeholder="Select date" style="width: 300px"></DatePicker>
    3. </template>
    4. <script>
    5.     export default {
    7.     }
    8. </script>

    开启属性 show-week-numbers 后，可以显示星期数。

    DatePicker 日期选择器 - 图6

    起始日期

    设置属性 start-date 后，可以将默认显示的日期面板设置为指定日期。

    1. <template>
    2.     <Row>
    3.         <Col span="12">
    4.             <DatePicker type="date" :start-date="new Date(1991, 4, 14)" placeholder="Select date" style="width: 200px"></DatePicker>
    5.         </Col>
    6.         <Col span="12">
    7.             <DatePicker type="daterange" :start-date="new Date(1991, 4, 14)" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    8.         </Col>
    9.     </Row>
    10. </template>
    11. <script>
    12.     export default {
    14.     }
    15. </script>

    日期格式

    设置属性 format 可以改变日期的显示格式，详见 )。

    注意，format 只是改变显示的格式，并非改变 value 值。

    1. <template>
    2.     <Row>
    3.         <Col span="12">
    4.             <DatePicker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
    5.         </Col>
    6.         <Col span="12">
    7.             <DatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    8.         </Col>
    9.     </Row>
    10. </template>
    11. <script>
    12.     export default {
    13.         data () {
    14.             return {
    15.                 value1: '2016-01-01',
    16.                 value2: ['2016-01-01', '2016-02-15']
    17.             }
    18.         }
    19.     }
    20. </script>

    DatePicker 日期选择器 - 图8

    日期时间选择

    设置属性 type 为 datetime 或 datetimerange 可以选择时间。

    设置 format 并且忽略秒，可以只设置小时和分钟维度。

    1. <template>
    2.     <DatePicker type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
    3.     <br>
    4.     <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 200px"></DatePicker>
    5.     <br>
    6.     <DatePicker type="datetimerange" placeholder="Select date and time" style="width: 300px"></DatePicker>
    7.     <br>
    8.     <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="Select date and time(Excluding seconds)" style="width: 300px"></DatePicker>
    9. </template>
    10. <script>
    11.     export default {
    13.     }
    14. </script>

    年和月

    设置属性 type 为 year 或 month 可以使用选择年或月的功能。

    DatePicker 日期选择器 - 图10

    不可选日期

    设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。

    disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。

    1. <template>
    2.     <Row>
    3.         <Col span="12">
    4.         </Col>
    5.         <Col span="12">
    6.             <DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
    7.         </Col>
    8.     </Row>
    9. </template>
    10. <script>
    11.     export default {
    12.         data () {
    13.             return {
    14.                 options3: {
    15.                     disabledDate (date) {
    16.                         return date && date.valueOf() < Date.now() - 86400000;
    17.                     }
    18.                 },
    20.                     disabledDate (date) {
    21.                         const disabledDay = date.getDate();
    22.                         return disabledDay === 15;
    23.                     }
    24.                 }
    25.             }
    26.         }
    27.     }
    28. </script>

    带有确认操作

    设置属性 confirm，选择日期后，选择器不会主动关闭，需用户确认后才可关闭。

    确认按钮并没有影响日期的正常选择。

    1. <template>
    2.     <Row>
    3.         <Col span="12">
    4.             <DatePicker type="date" confirm placeholder="Select date" style="width: 200px"></DatePicker>
    5.         </Col>
    6.         <Col span="12">
    7.             <DatePicker type="daterange" confirm placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    8.         </Col>
    9.     </Row>
    10. </template>
    11. <script>
    12.     export default {
    14.     }
    15. </script>

    DatePicker 日期选择器 - 图12

    手动控制组件

    对于一些定制化的场景，可以使用 slot 配合参数 open 及事件来手动控制组件的显示状态，详见示例和 API。

    1. <template>
    2.     <DatePicker
    3.         :open="open"
    4.         :value="value3"
    5.         confirm
    6.         type="date"
    7.         @on-change="handleChange"
    8.         @on-clear="handleClear"
    9.         @on-ok="handleOk">
    10.         <a href="javascript:void(0)" @click="handleClick">
    11.             <Icon type="ios-calendar-outline"></Icon>
    12.             <template v-if="value3 === ''">Select date</template>
    13.             <template v-else>{{ value3 }}</template>
    14.         </a>
    15.     </DatePicker>
    16. </template>
    17. <script>
    18.     export default {
    19.         data () {
    20.             return {
    21.                 open: false,
    22.                 value3: ''
    23.             }
    24.         },
    25.         methods: {
    26.             handleClick () {
    27.                 this.open = !this.open;
    28.             },
    29.             handleChange (date) {
    30.                 this.value3 = date;
    31.             },
    32.             handleClear () {
    33.                 this.open = false;
    34.             },
    35.             handleOk () {
    36.                 this.open = false;
    37.             }
    38.         }
    39.     }

    尺寸

    通过设置属性 size 为 large 或 small 可以调整选择器尺寸为大或小，默认不填为中。

    选择器额外配置