DatePicker日期选择框 - 图1

DatePicker 日期选择框

代码演示

DatePicker日期选择框 - 图2

基本用法

最简单的用法，在浮层中可以选择或者输入日期。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker v-model:value="value1" />
  4.     <a-month-picker v-model:value="value2" placeholder="Select month" />
  5.     <a-range-picker v-model:value="value3" />
  6.     <a-week-picker v-model:value="value4" placeholder="Select week" />
  7.   </a-space>
  8. </template>
  9. <script lang="ts">
  10. import { defineComponent, ref } from 'vue';
  11. import { Moment } from 'moment';
  12. export default defineComponent({
  13.   setup() {
  14.     return {
  15.       value1: ref<Moment>(),
  16.       value2: ref<Moment>(),
  17.       value3: ref<Moment[]>([]),
  18.       value4: ref<Moment>(),
  19.     };
  20.   },
  21. });
  22. </script>

DatePicker日期选择框 - 图3

日期时间选择

增加选择时间功能，当 showTime 为一个对象时，其属性会传递给内建的 TimePicker。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
  4.     <a-range-picker
  5.       :show-time="{ format: 'HH:mm' }"
  6.       format="YYYY-MM-DD HH:mm"
  7.       :placeholder="['Start Time', 'End Time']"
  8.       @change="onChange"
  9.       @ok="onOk"
  10.     />
  11.   </a-space>
  12. </template>
  13. <script lang="ts">
  14. import { Moment } from 'moment';
  15. import { defineComponent } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const onChange = (value: Moment[], dateString: string[]) => {
  19.       console.log('Selected Time: ', value);
  20.       console.log('Formatted Selected Time: ', dateString);
  21.     };
  23.     const onOk = (value: Moment[]) => {
  24.       console.log('onOk: ', value);
  25.     };
  27.     return {
  28.       onChange,
  29.       onOk,
  30.     };
  31.   },
  32. });
  33. </script>

DatePicker日期选择框 - 图4

不可选择日期和时间

可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker
  4.       v-model:value="value1"
  5.       format="YYYY-MM-DD HH:mm:ss"
  6.       :disabled-date="disabledDate"
  7.       :disabled-time="disabledDateTime"
  8.       :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
  9.     />
  10.     <a-month-picker
  11.       v-model:value="value2"
  12.       :disabled-date="disabledDate"
  13.       placeholder="Select month"
  14.     />
  15.     <a-range-picker
  16.       style="width: 400px"
  17.       v-model:value="value3"
  18.       :disabled-date="disabledDate"
  19.       :disabled-time="disabledRangeTime"
  20.       :show-time="{
  21.         hideDisabledOptions: true,
  22.         defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
  23.       }"
  24.       format="YYYY-MM-DD HH:mm:ss"
  25.     />
  26.   </a-space>
  27. </template>
  28. <script lang="ts">
  29. import moment, { Moment } from 'moment';
  30. import { defineComponent, ref } from 'vue';
  31. export default defineComponent({
  32.   setup() {
  33.     const range = (start: number, end: number) => {
  34.       const result = [];
  36.       for (let i = start; i < end; i++) {
  37.         result.push(i);
  38.       }
  40.       return result;
  41.     };
  43.     const disabledDate = (current: Moment) => {
  44.       // Can not select days before today and today
  45.       return current && current < moment().endOf('day');
  46.     };
  48.     const disabledDateTime = () => {
  49.       return {
  50.         disabledHours: () => range(0, 24).splice(4, 20),
  51.         disabledMinutes: () => range(30, 60),
  52.         disabledSeconds: () => [55, 56],
  53.       };
  54.     };
  56.     const disabledRangeTime = (_: Moment[], type: 'start' | 'end') => {
  57.       if (type === 'start') {
  58.         return {
  59.           disabledHours: () => range(0, 60).splice(4, 20),
  60.           disabledMinutes: () => range(30, 60),
  61.           disabledSeconds: () => [55, 56],
  62.         };
  63.       }
  64.       return {
  65.         disabledHours: () => range(0, 60).splice(20, 4),
  66.         disabledMinutes: () => range(0, 31),
  67.         disabledSeconds: () => [55, 56],
  68.       };
  69.     };
  71.     return {
  72.       moment,
  73.       value1: ref<Moment>(),
  74.       value2: ref<Moment>(),
  75.       value3: ref<Moment[]>([]),
  76.       disabledDate,
  77.       disabledDateTime,
  78.       disabledRangeTime,
  79.     };
  80.   },
  81. });
  82. </script>

DatePicker日期选择框 - 图5

预设范围

可以预设常用的日期范围以提高用户体验。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-range-picker v-model:value="value1" :ranges="ranges" />
  4.     <a-range-picker
  5.       style="width: 400px"
  6.       v-model:value="value2"
  7.       :ranges="ranges"
  8.       show-time
  9.       format="YYYY/MM/DD HH:mm:ss"
  10.     />
  11.   </a-space>
  12. </template>
  13. <script lang="ts">
  14. import moment, { Moment } from 'moment';
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     return {
  19.       value1: ref<Moment[]>([]),
  20.       value2: ref<Moment[]>([]),
  21.       ranges: { Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] },
  22.     };
  23.   },
  24. });
  25. </script>

DatePicker日期选择框 - 图6

三种大小

三种大小的输入框，若不设置，则为 default。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-radio-group v-model:value="size">
  4.       <a-radio-button value="large">Large</a-radio-button>
  5.       <a-radio-button value="default">Default</a-radio-button>
  6.       <a-radio-button value="small">Small</a-radio-button>
  7.     </a-radio-group>
  8.     <a-date-picker :size="size" />
  9.     <a-month-picker :size="size" placeholder="Select Month" />
  10.     <a-range-picker :size="size" />
  11.     <a-week-picker :size="size" placeholder="Select Week" />
  12.   </a-space>
  13. </template>
  14. <script lang="ts">
  15. import moment from 'moment';
  16. import { defineComponent, ref } from 'vue';
  17. export default defineComponent({
  18.   setup() {
  19.     return {
  20.       size: ref<string>('default'),
  21.       moment,
  22.     };
  23.   },
  24. });
  25. </script>

DatePicker日期选择框 - 图7

受控面板

通过组合 mode 与 onPanelChange 控制要展示的面板。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker
  4.       :mode="mode1"
  5.       show-time
  6.       @openChange="handleOpenChange1"
  7.       @panelChange="handlePanelChange1"
  8.     />
  9.     <a-range-picker
  10.       :placeholder="['Start month', 'End month']"
  11.       format="YYYY-MM"
  12.       :value="value"
  13.       :mode="mode2"
  14.       @panelChange="handlePanelChange2"
  15.       @change="handleChange"
  16.     />
  17.   </a-space>
  18. </template>
  19. <script lang="ts">
  20. import { Moment } from 'moment';
  21. import { defineComponent, ref } from 'vue';
  22. export default defineComponent({
  23.   setup() {
  24.     const mode1 = ref<string>('time');
  25.     const mode2 = ref<string[]>(['month', 'month']);
  26.     const value = ref<Moment[]>([]);
  28.     const handleOpenChange1 = (open: boolean) => {
  29.       if (open) {
  30.         mode1.value = 'time';
  31.       }
  32.     };
  34.     const handleChange = (val: Moment[]) => {
  35.       value.value = val;
  36.     };
  38.     const handlePanelChange1 = (val: Moment[], mode: string) => {
  39.       mode1.value = mode;
  40.     };
  42.     const handlePanelChange2 = (val: Moment[], mode: string[]) => {
  43.       value.value = val;
  44.       mode2.value = [
  45.         mode[0] === 'date' ? 'month' : mode[0],
  46.         mode[1] === 'date' ? 'month' : mode[1],
  47.       ];
  48.     };
  50.     return {
  51.       mode1,
  52.       mode2,
  53.       value,
  54.       handleOpenChange1,
  55.       handleChange,
  56.       handlePanelChange1,
  57.       handlePanelChange2,
  58.     };
  59.   },
  60. });
  61. </script>

DatePicker日期选择框 - 图8

自定义渲染

增加自定义渲染功能，在默认 slot 中，你可以设置任何你想渲染的组件。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker v-model:value="time1" placeholder="Select Time" @ok="onOk">
  4.       <span>{{ time1 ? time1.toString() : 'SelectTime' }}</span>
  5.     </a-date-picker>
  6.     <a-range-picker v-model:value="time2">
  7.       <span>
  8.         {{ time2 ? time2.toString() : '请选择' }}
  9.       </span>
  10.     </a-range-picker>
  11.   </a-space>
  12. </template>
  13. <script lang="ts">
  14. import moment, { Moment } from 'moment';
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const time1 = ref<Moment>();
  19.     const time2 = ref<Moment>();
  21.     const onOk = (value: Moment) => {
  22.       console.log('onOk: ', value);
  23.     };
  25.     const clearTime = () => {
  26.       time1.value = undefined;
  27.     };
  29.     return {
  30.       time1,
  31.       time2,
  32.       moment,
  33.       onOk,
  34.       clearTime,
  35.     };
  36.   },
  37. });
  38. </script>

DatePicker日期选择框 - 图9

日期格式

使用 format 属性，可以自定义日期显示格式。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker v-model:value="value1" :format="dateFormat" />
  4.     <a-date-picker v-model:value="value2" :format="dateFormatList" />
  5.     <a-month-picker v-model:value="value3" :format="monthFormat" />
  6.     <a-range-picker v-model:value="value4" :format="dateFormat" />
  7.   </a-space>
  8. </template>
  9. <script lang="ts">
  10. import moment, { Moment } from 'moment';
  11. import { defineComponent, ref } from 'vue';
  12. export default defineComponent({
  13.   setup() {
  14.     const dateFormat = 'YYYY/MM/DD';
  15.     const monthFormat = 'YYYY/MM';
  16.     const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
  17.     return {
  18.       value1: ref<Moment>(moment('2015/01/01', dateFormat)),
  19.       value2: ref<Moment>(moment('01/01/2015', dateFormatList[0])),
  20.       value3: ref<Moment>(moment('2015/01', monthFormat)),
  21.       value4: ref<Moment[]>([moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]),
  22.       dateFormat,
  23.       monthFormat,
  24.       dateFormatList,
  25.       moment,
  26.     };
  27.   },
  28. });
  29. </script>

DatePicker日期选择框 - 图10

禁用

选择框的不可用状态。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker v-model:value="value1" />
  4.     <a-month-picker v-model:value="value2" disabled />
  5.     <a-range-picker v-model:value="value3" disabled />
  6.   </a-space>
  7. </template>
  8. <script lang="ts">
  9. import moment from 'moment';
  10. import { defineComponent, ref } from 'vue';
  11. export default defineComponent({
  12.   setup() {
  13.     const dateFormat = 'YYYY-MM-DD';
  14.     return {
  15.       value1: ref<moment.Moment>(moment('2015-06-06', dateFormat)),
  16.       value2: ref<moment.Moment>(moment('2015-06', 'YYYY-MM')),
  17.       value3: ref<moment.Moment[]>([
  18.         moment('2015-06-06', dateFormat),
  19.         moment('2015-06-06', dateFormat),
  20.       ]),
  21.     };
  22.   },
  23. });
  24. </script>

~

选择不超过七天的范围

这里举例如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择。

  1. <template>
  2.   <a-range-picker
  3.     v-model:value="value"
  4.     :disabledDate="disabledDate"
  5.     @change="onChange"
  6.     @openChange="onOpenChange"
  7.     @calendarChange="onCalendarChange"
  8.   />
  9. </template>
  10. <script lang="ts">
  11. import { Moment } from 'moment';
  12. import { defineComponent, ref } from 'vue';
  13. export default defineComponent({
  14.   setup() {
  15.     const dates = ref<Moment[]>([]);
  16.     const value = ref<Moment[]>();
  18.     const disabledDate = (current: Moment) => {
  19.       if (!dates.value || dates.value.length === 0) {
  20.         return false;
  21.       }
  22.       const diffDate = current.diff(dates.value[0], 'days');
  23.       return Math.abs(diffDate) > 7;
  24.     };
  26.     const onOpenChange = (open: boolean) => {
  27.       if (open) {
  28.         dates.value = [];
  29.       }
  30.     };
  32.     const onChange = (val: Moment[]) => {
  33.       value.value = val;
  34.     };
  36.     const onCalendarChange = (val: Moment[]) => {
  37.       dates.value = val;
  38.     };
  40.     return {
  41.       dates,
  42.       value,
  43.       disabledDate,
  44.       onOpenChange,
  45.       onChange,
  46.       onCalendarChange,
  47.     };
  48.   },
  49. });
  50. </script>

DatePicker日期选择框 - 图11

额外的页脚

在浮层中加入额外的页脚，以满足某些定制信息的需求。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker>
  4.       <template #renderExtraFooter>extra footer</template>
  5.     </a-date-picker>
  6.     <a-date-picker show-time>
  7.       <template #renderExtraFooter>extra footer</template>
  8.     </a-date-picker>
  9.     <a-range-picker>
  10.       <template #renderExtraFooter>extra footer</template>
  11.     </a-range-picker>
  12.     <a-range-picker show-time>
  13.       <template #renderExtraFooter>extra footer</template>
  14.     </a-range-picker>
  15.     <a-month-picker placeholder="Select month">
  16.       <template #renderExtraFooter>extra footer</template>
  17.     </a-month-picker>
  18.   </a-space>
  19. </template>

DatePicker日期选择框 - 图12

定制日期单元格

使用 dateRender 可以自定义日期单元格的内容和样式。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker v-model:value="value1">
  4.       <template #dateRender="{ current, today }">
  5.         <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
  6.           {{ current.date() }}
  7.         </div>
  8.       </template>
  9.     </a-date-picker>
  10.     <a-range-picker v-model:value="value2">
  11.       <template #dateRender="{ current }">
  12.         <div class="ant-calendar-date" :style="getCurrentStyle(current)">
  13.           {{ current.date() }}
  14.         </div>
  15.       </template>
  16.     </a-range-picker>
  17.     <a-week-picker v-model:value="value3">
  18.       <template #dateRender="{ current }">
  19.         <div class="ant-calendar-date" :style="getCurrentStyle(current)">
  20.           {{ current.date() }}
  21.         </div>
  22.       </template>
  23.     </a-week-picker>
  24.   </a-space>
  25. </template>
  26. <script lang="ts">
  27. import { Moment } from 'moment';
  28. import { CSSProperties, defineComponent, ref } from 'vue';
  29. export default defineComponent({
  30.   setup() {
  31.     const getCurrentStyle = (current: Moment) => {
  32.       const style: CSSProperties = {};
  34.       if (current.date() === 1) {
  35.         style.border = '1px solid #1890ff';
  36.         style.borderRadius = '50%';
  37.       }
  39.       return style;
  40.     };
  41.     return {
  42.       value1: ref<Moment>(),
  43.       value2: ref<Moment[]>([]),
  44.       value3: ref<Moment>(),
  45.       getCurrentStyle,
  46.     };
  47.   },
  48. });
  49. </script>

DatePicker日期选择框 - 图13

自定义日期范围选择

当 RangePicker 无法满足业务需求时，可以使用两个 DatePicker 实现类似的功能。

  • 通过设置 disabledDate 方法，来约束开始和结束日期。
  • 通过 open openChange 来优化交互。
  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker
  4.       v-model:value="startValue"
  5.       :disabled-date="disabledStartDate"
  6.       show-time
  7.       format="YYYY-MM-DD HH:mm:ss"
  8.       placeholder="Start"
  9.       @openChange="handleStartOpenChange"
  10.     />
  11.     <a-date-picker
  12.       v-model:value="endValue"
  13.       :disabled-date="disabledEndDate"
  14.       show-time
  15.       format="YYYY-MM-DD HH:mm:ss"
  16.       placeholder="End"
  17.       :open="endOpen"
  18.       @openChange="handleEndOpenChange"
  19.     />
  20.   </a-space>
  21. </template>
  22. <script lang="ts">
  23. import { Moment } from 'moment';
  24. import { defineComponent, ref, watch } from 'vue';
  25. export default defineComponent({
  26.   setup() {
  27.     const startValue = ref<Moment | undefined>();
  28.     const endValue = ref<Moment>();
  29.     const endOpen = ref<boolean>(false);
  31.     const disabledStartDate = (startValue: Moment) => {
  32.       if (!startValue || !endValue.value) {
  33.         return false;
  34.       }
  36.       return startValue.valueOf() > endValue.value.valueOf();
  37.     };
  39.     const disabledEndDate = (endValue: Moment) => {
  40.       if (!endValue || !startValue.value) {
  41.         return false;
  42.       }
  44.       return startValue.value.valueOf() >= endValue.valueOf();
  45.     };
  47.     const handleStartOpenChange = (open: boolean) => {
  48.       if (!open) {
  49.         endOpen.value = true;
  50.       }
  51.     };
  53.     const handleEndOpenChange = (open: boolean) => {
  54.       endOpen.value = open;
  55.     };
  57.     watch(startValue, () => {
  58.       console.log('startValue', startValue.value);
  59.     });
  61.     watch(endValue, () => {
  62.       console.log('endValue', endValue.value);
  63.     });
  65.     return {
  66.       startValue,
  67.       endValue,
  68.       endOpen,
  69.       disabledStartDate,
  70.       disabledEndDate,
  71.       handleStartOpenChange,
  72.       handleEndOpenChange,
  73.     };
  74.   },
  75. });
  76. </script>

DatePicker日期选择框 - 图14

后缀图标

最简单的用法，在浮层中可以选择或者输入日期。

  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-date-picker @change="onChange">
  4.       <template #suffixIcon>
  5.         <SmileOutlined />
  6.       </template>
  7.     </a-date-picker>
  8.     <a-month-picker @change="onChange" placeholder="Select month">
  9.       <template #suffixIcon>
  10.         <SmileOutlined />
  11.       </template>
  12.     </a-month-picker>
  13.     <a-range-picker @change="onChange">
  14.       <template #suffixIcon>
  15.         <SmileOutlined />
  16.       </template>
  17.     </a-range-picker>
  18.     <a-week-picker @change="onChange" placeholder="Select week">
  19.       <template #suffixIcon>
  20.         <SmileOutlined />
  21.       </template>
  22.     </a-week-picker>
  23.     <a-date-picker suffix-icon="ab" @change="onChange" />
  24.     <a-month-picker suffix-icon="ab" placeholder="Select month" @change="onChange" />
  25.     <a-range-picker suffix-icon="ab" @change="onChange" />
  26.     <a-week-picker suffix-icon="ab" placeholder="Select week" @change="onChange" />
  27.   </a-space>
  28. </template>
  29. <script lang="ts">
  30. import { SmileOutlined } from '@ant-design/icons-vue';
  31. import { Moment } from 'moment';
  32. import { defineComponent } from 'vue';
  33. export default defineComponent({
  34.   components: {
  35.     SmileOutlined,
  36.   },
  37.   setup() {
  38.     const onChange = (date: Moment, dateString: string[]) => {
  39.       console.log(date, dateString);
  40.     };
  42.     return {
  43.       onChange,
  44.     };
  45.   },
  46. });
  47. </script>

API

日期类组件包括以下四种形式。

  • DatePicker
  • MonthPicker
  • RangePicker
  • WeekPicker

国际化配置

默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：ConfigProvider 国际化。

如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：默认配置。

  1. <template>
  2.   <a-date-picker v-model:value="value" :locale="locale" />
  3. </template>
  4. <script>
  5.   import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  6.   import { defineComponent } from 'vue';
  7.   export default defineComponent({
  8.     setup() {
  9.       return {
  10.         locale,
  11.         value: null,
  12.       };
  13.     },
  14.   });
  15. </script>

注意： DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。

  1. <template>
  2.   <a-date-picker v-model:value="value" />
  3. </template>
  4. <script>
  5.   // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
  6.   import moment from 'moment';
  7.   import 'moment/dist/locale/zh-cn';
  8.   import { defineComponent } from 'vue';
  9.   export default defineComponent({
  10.     setup() {
  11.       return {
  12.         value: moment('2015-01-01', 'YYYY-MM-DD')
  13.         moment,
  14.       };
  15.     },
  16.   });
  17. </script>

共同的 API

以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。

参数说明类型默认值版本
allowClear是否显示清除按钮booleantrue-
autofocus自动获取焦点booleanfalse-
dateRender作用域插槽，自定义日期单元格的内容#dateRender=”{current, today}”--
disabled禁用booleanfalse-
disabledDate不可选择的日期(currentDate: moment) => boolean无-
getCalendarContainer定义浮层的容器，默认为 body 上新建 divfunction(trigger)无-
locale国际化配置object默认配置-
mode日期面板的状态time | date | month | year | decade‘date’-
open控制弹层是否展开boolean--
placeholder输入框提示文字string|RangePicker[]--
popupStyle额外的弹出日历样式CSSProperties{}-
dropdownClassName额外的弹出日历 classstring--
size输入框大小，large 高度为 40px，small 为 24px，默认是 32pxstring无-
suffixIcon自定义的选择框后缀图标VNode | slot--
inputReadOnly设置输入框为只读（避免在移动设备上打开虚拟键盘）boolean-1.5.4
align该值将合并到 placement 的配置中，设置参考 dom-alignObject无1.5.4
valueFormat可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 moment 对象string，具体格式-1.5.4

共有的事件

事件名称说明回调参数
openChange弹出日历和关闭日历的回调function(status)
panelChange日期面板变化时的回调function(value, mode)

共同的方法

名称描述
blur()移除焦点
focus()获取焦点

DatePicker

参数说明类型默认值
defaultPickerValue默认面板日期moment无
disabledTime不可选择的时间function(date)无
format设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.jsstring | string[]“YYYY-MM-DD”
renderExtraFooter在面板中添加额外的页脚#renderExtraFooter=”mode”-
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒，例子momentmoment()
showToday是否展示“今天”按钮booleantrue
value(v-model)日期moment无

DatePicker 事件

事件名称说明回调参数
change时间发生变化的回调function(date: moment | string, dateString: string)
ok点击确定按钮的回调function(date: moment | string)

MonthPicker

参数说明类型默认值
defaultPickerValue默认面板日期moment无
format展示的日期格式，配置参考 moment.jsstring“YYYY-MM”
monthCellContentRender自定义的月份内容渲染方法#monthCellContentRender=”{current, locale}”-
renderExtraFooter在面板中添加额外的页脚#renderExtraFooter=”mode”-
value(v-model)日期moment无

MonthPicker 事件

事件名称说明回调参数
change时间发生变化的回调，发生在用户选择时间时function(date: moment | string, dateString: string)

WeekPicker

参数说明类型默认值
defaultPickerValue默认面板日期moment无
format展示的日期格式，配置参考 moment.jsstring“YYYY-wo”
value(v-model)日期moment-
renderExtraFooter在面板中添加额外的页脚#renderExtraFooter=”mode”-

WeekPicker 事件

事件名称说明回调参数
change时间发生变化的回调，发生在用户选择时间时function(date: moment | string, dateString: string)

RangePicker

参数说明类型默认值版本
defaultPickerValue默认面板日期moment[]无
disabledTime不可选择的时间function(dates: [moment, moment], partial: ‘start’ | ‘end’)无
format展示的日期格式string“YYYY-MM-DD HH:mm:ss”
ranges预设时间范围快捷选择{ [range: string]: moment[] } | { [range: string]: () => moment[] }无
renderExtraFooter在面板中添加额外的页脚#renderExtraFooter=”mode”-
separator设置分隔符string‘~’1.5.0
showTime增加时间选择功能Object|booleanTimePicker Options
showTime.defaultValue设置用户选择日期时默认的时分秒moment[][moment(), moment()]
value(v-model)日期moment[]无

RangePicker 事件

事件名称说明回调参数
calendarChange待选日期发生变化的回调function(dates: [moment, moment] | [string, string], dateStrings: [string, string])
change日期范围发生变化的回调function(dates: [moment, moment] | [string, string], dateStrings: [string, string])
ok点击确定按钮的回调function(dates: [moment, moment] | [string, string])