日期选择器 DatePicker

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

基本用法

日期输入器的基础使用。

代码事例

vue

<template>
  <fk-date-picker value-format="MM-DD HH:mm:ss" style="width: 200px;" />
</template>

代码事例

vue

<template>
  <fk-range-picker
    style="width: 240px; marginBottom: 20px;"
    @change="onChange"
    @select="onSelect"
  />
  <br />
  <fk-date-picker
    style="width: 240px; margin-bottom: 20px; margin-right: 24px;"
    shortcuts-position="left"
    :shortcuts="shortcuts"
  />
  <br />
  <fk-range-picker
    style="width: 240px;"
    shortcuts-position="left"
    :shortcuts="rangeShortcuts"
  />
</template>

<script>
import dayjs from 'dayjs';

export default {
  setup() {
    return {
      dayjs,
      shortcuts: [
        {
          label: '今天',
          value: () => dayjs(),
        },
        {
          label: '昨天',
          value: () => dayjs().subtract(1, 'day')
        },
        {
          label: '最近一周',
          value: () => dayjs().add(1, 'week'),
        },
        {
          label: '最近一月',
          value: () => dayjs().add(1, 'month'),
        },
        {
          label: '最近两月',
          value: () => dayjs().add(2, 'month'),
        }
      ],
      rangeShortcuts: [
        {
          label: '今天',
          value: () => [dayjs(), dayjs()],
        },
        {
          label: '昨天',
          value: () => [dayjs().subtract(1, 'day'), dayjs().subtract(1, 'day')],
        },
        {
          label: '上周',
          value: () => [dayjs().startOf('week').subtract(7, 'day'), dayjs().endOf('week').subtract(7, 'day')],
        },
        {
          label: '上月',
          value: () => [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
        },
        {
          label: '本月',
          value: () => [dayjs().startOf('month'), dayjs().endOf('month')],
        },
        {
          label: '最近7天',
          value: () => [dayjs().subtract(7 - 1, 'day'), dayjs()],
        },
        {
          label: '最近30天',
          value: () => [dayjs().subtract(30 - 1, 'day'), dayjs()],
        },
        {
          label: '最近60天',
          value: () => [dayjs().subtract(60 - 1, 'day'), dayjs()],
        },
        {
          label: '最近90天',
          value: () => [dayjs().subtract(90 - 1, 'day'), dayjs()],
        },
      ],
      onSelect(dateString, date) {
        console.log('onSelect', dateString, date);
      },
      onChange(dateString, date) {
        console.log('onChange:', dateString, date);
      },
    };
  },
}
</script>

月份选择器

月份输入器的基础使用。

代码事例

vue

<template>
  <fk-month-picker style="width: 200px;" />
</template>

年份选择器

年份输入器的基础使用。

代码事例

vue

<template>
  <fk-year-picker style="width: 200px;" />
</template>

季度选择器

季度选择器的使用。

代码事例

vue

<template>
  <fk-quarter-picker style="width: 200px;" />
</template>

周选择器

周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。

代码事例

vue

<template>
  <fk-week-picker style="width: 200px; margin: 0 24px 24px 0;" />
  <fk-week-picker
    style="width: 200px; margin: 0 24px 24px 0;"
    day-start-of-week="1"
  />
</template>

带时间的日期选择

使用 showTime 可以使用带时间的日期选择。

代码事例

vue

<template>
  <fk-date-picker
    style="width: 220px; margin: 0 24px 24px 0;"
    show-time
    :time-picker-props="{ defaultValue: '09:09:06' }"
    format="YYYY-MM-DD HH:mm:ss"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
  <fk-date-picker
    style="width: 220px; margin: 0 24px 24px 0;"
    show-time
    format="YYYY-MM-DD hh:mm"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
  <fk-range-picker
    style="width: 360px; margin: 0 24px 24px 0;"
    show-time
    :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
    format="YYYY-MM-DD HH:mm"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>
<script>
export default {
  setup() {
    function onSelect(dateString, date) {
      console.log('onSelect', dateString, date);
    }

    function onChange(dateString, date) {
      console.log('onChange: ', dateString, date);
    }

    function onOk(dateString, date) {
      console.log('onOk: ', dateString, date);
    }
    return {
      onSelect,
      onChange,
      onOk,
    };
  }
}
</script>

范围选择器

范围输入器的基础使用。

代码事例

vue

<template>
  <fk-range-picker
    @change="onChange"
    @select="onSelect"
    style="width: 254px; marginBottom: 20px;"
  />
  <br />
  <fk-range-picker
    mode="week"
    @change="onChange"
    @select="onSelect"
    style="width: 254px; marginBottom: 20px;"
  />
  <br />
  <fk-range-picker
    mode="month"
    @change="onChange"
    @select="onSelect"
    style="width: 254px; marginBottom: 20px;"
  />
  <br />
  <fk-range-picker
    mode="year"
    @change="onChange"
    @select="onSelect"
    style="width: 254px; marginBottom: 20px;"
  />
  <br />
  <fk-range-picker
    mode="quarter"
    @change="onChange"
    @select="onSelect"
    style="width: 254px; marginBottom: 20px;"
  />
  <br />
  <fk-range-picker
    showTime
    :time-picker-props="{
    defaultValue:['00:00:00','00:00:00']
    }"
    @change="onChange"
    @select="onSelect"
    style=" width: 380px; "
  />
</template>
<script>
export default {
  setup() {
    return {
      onSelect(dateString, date) {
        console.log('onSelect', dateString, date);
      },
      onChange(dateString, date) {
        console.log('onChange: ', dateString, date);
      },
    };
  },
}
</script>

默认值

日期输入器有默认值的情况。

代码事例

vue

<template>
  <fk-date-picker
    defaultValue="2019-06-03"
    @select="onSelect"
    @change="onChange"
    :style="style"
  />
  <fk-date-picker
    defaultValue="2019-06-03"
    :format="(value) => `custom format: ${dayjs(value).format('YYYY-MM-DD')}`"
    @select="onSelect"
    @change="onChange"
    :style="{ ...style, width: '240px' }"
  />
  <fk-date-picker
    showTime
    defaultValue="2019-06-03 08:00:00"
    @select="onSelect"
    @change="onChange"
    :style="style"
  />
  <fk-year-picker
    defaultValue="2019"
    @select="onSelect"
    @change="onChange"
    :style="style"
  />
  <fk-month-picker
    defaultValue="2019-06"
    @select="onSelect"
    @change="onChange"
    :style="style"
  />
  <fk-week-picker
    :defaultValue="dayjs('2019-08-02')"
    @select="onSelect"
    @change="onChange"
    :style="style"
  />
  <fk-range-picker
    showTime
    :defaultValue="['2019-08-08 00:00:00', '2019-08-18 00:00:00']"
    @select="onSelect"
    @change="onChange"
    :style="{ ...style, width: '360px' }"
  />
  <fk-range-picker
    mode="month"
    :defaultValue="['2019-08', '2020-06']"
    @select="onSelect"
    @change="onChange"
    style="width: 300px; marginBottom: 24px;"
  />
</template>
<script>
import dayjs from 'dayjs';

export default {
  setup() {
    return {
      dayjs,
      onSelect(dateString, date) {
        console.log('onSelect', dateString, date);
      },
      onChange(dateString, date) {
        console.log('onChange: ', dateString, date);
      },
      style: { width: '200px', marginBottom: '24px', marginRight: '24px' }
    }
  }
}
</script>

不可选取的时间

使用 disabledDate 可以禁用某些日期。使用 disabledTime 可以禁用时间，需要配合 showTime 使用。

代码事例

vue

<template>
  <div>
    <fk-date-picker
      style="width: 200px; margin-right: 24px; margin-bottom: 24px;"
      :disabledDate="(current) => dayjs(current).isBefore(dayjs())"
    />
    <fk-range-picker
      style="width: 360px; margin-right: 24px; margin-bottom: 24px;"
      :disabledDate="(current) => dayjs(current).isBefore(dayjs())"
    />
    <fk-date-picker
      style="width: 200px; margin-right: 24px; margin-bottom: 24px;"
      show-time
      :disabledDate="(current) => dayjs(current).isBefore(dayjs())"
      :disabledTime="getDisabledTime"
    />
    <fk-range-picker
      style="width: 360px; margin-bottom: 24px;"
      show-time
      :timePickerProps="{hideDisabledOptions: true}"
      :disabledDate="(current) => dayjs(current).isBefore(dayjs())"
      :disabledTime="getDisabledRangeTime"
    />
  </div>
</template>
<script>
import dayjs from 'dayjs';

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function getDisabledTime(date) {
  return {
    disabledHours: () => range(6, 24),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => range(30, 60),
  };
}

function getDisabledRangeTime(date, type) {
  return {
    disabledHours: () => type === 'start' ? range(0, 6): range(6, 24),
    disabledMinutes: () => type === 'end' ? range(0, 30) : [31, 60],
    disabledSeconds: () => range(30, 60),
  };
}

export default {
  setup() {
    return {
      dayjs,
      getDisabledTime,
      getDisabledRangeTime,
    }
  }
}
</script>

预设时间快捷选择

使用 shortcuts 可以预设时间快捷选择。

代码事例

vue

<template>
  <fk-date-picker
    style="width: 300px; margin-bottom: 24px; margin-right: 24px;"
    :shortcuts="[
      {
        label: '2 hours later',
        value: () => dayjs().add(2, 'hour')
      },
      {
        label: 'a week later',
        value: () => dayjs().add(1, 'week'),
      },
      {
        label: 'a month later',
        value: () => dayjs().add(1, 'month'),
      },
    ]"
    show-time
  />
  <fk-month-picker
    style="width: 300px; margin-bottom: 24px; margin-right: 24px;"
    :shortcuts="[
      {
        label: 'last month',
        value: () => dayjs().subtract(1, 'month'),
      },
      {
        label: 'six months later',
        value: () => dayjs().add(6, 'month'),
      },
      {
        label: 'two years later',
        value: () => dayjs().add(2, 'year'),
      },
    ]"
  />
  <fk-range-picker
    style="width: 400px; margin-bottom: 24px; margin-right: 24px;"
    :shortcuts="[
      {
        label: 'next 7 days',
        value: () => [dayjs(), dayjs().add(1, 'week')],
      },
      {
        label: 'next 30 days',
        value: () => [dayjs(), dayjs().add(1, 'month')],
      },
      {
        label: 'next 365 days',
        value: () => [dayjs(), dayjs().add(1, 'year')],
      },
    ]"
  />
  <fk-range-picker
    mode="month"
    style="width: 300px; margin-bottom: 24px;"
    :shortcuts="[
      {
        label: 'next 6 months',
        value: () => [dayjs(), dayjs().add(6, 'month')],
      },
      {
        label: 'next 12 months',
        value: () => [dayjs(), dayjs().add(1, 'year')],
      },
      {
        label: 'next 10 years',
        value: () => [dayjs(), dayjs().add(10, 'year')],
      },
    ]"
  />
</template>
<script>
import dayjs from 'dayjs';
export default {
  setup() {
    return {
      dayjs
    }
  }
}
</script>

定制预设范围位置

使用 shortcutsPosition 可以将预设时间快捷选择放到左边、右边或者底部。

代码事例

vue

<template>
  <fk-date-picker
    style="width: 254px; margin-bottom: 20px; margin-right: 24px;"
    shortcuts-position="left"
    :shortcuts="shortcuts"
  />
  <fk-range-picker
    style="width: 300px; margin-bottom: 20px;"
    shortcuts-position="left"
    :shortcuts="rangeShortcuts"
  />
  <br />
  <fk-date-picker
    style="width: 254px; margin-right: 24px;"
    shortcuts-position="right"
    :shortcuts="shortcuts"
  />
  <fk-range-picker
    style="width: 300px;"
    shortcuts-position="right"
    :shortcuts="rangeShortcuts"
  />
</template>
<script>
import dayjs from 'dayjs';
export default {
  setup() {
    return {
      dayjs,
      shortcuts: [
        {
          label: 'yesterday',
          value: () => dayjs().subtract(1, 'day')
        },
        {
          label: 'today',
          value: () => dayjs(),
        },
        {
          label: 'a week later',
          value: () => dayjs().add(1, 'week'),
        },
        {
          label: 'a month later',
          value: () => dayjs().add(1, 'month'),
        },
        {
          label: '2 months later',
          value: () => dayjs().add(2, 'month'),
        }
      ],
      rangeShortcuts: [
        {
          label: 'next 2 days',
          value: () => [dayjs(), dayjs().add(2, 'day')],
        },
        {
          label: 'next 7 days',
          value: () => [dayjs(), dayjs().add(1, 'month')],
        },
        {
          label: 'next 30 days',
          value: () => [dayjs(), dayjs().add(1, 'month')],
        },
        {
          label: 'next 6 months',
          value: () => [dayjs(), dayjs().add(6, 'month')],
        },
        {
          label: 'next 12 months',
          value: () => [dayjs(), dayjs().add(1, 'year')],
        },
        {
          label: 'next 10 years',
          value: () => [dayjs(), dayjs().add(10, 'year')],
        }
      ]
    }
  }
}
</script>

动态控制选取范围

根据选择的值来控制选取的范围，使用 onSelect 配合 disabledDate 来实现。

代码事例

vue

<template>
  <fk-range-picker
      style="width: 300px;"
      @select="onSelect"
      @popupVisibleChange="onPopupVisibleChange"
      :disabledDate="disabledDate"
    />
</template>
<script>
export default {
  data() {
    return {
      dates: [],
    }
  },
  methods: {
    onSelect(valueString, value) {
      this.dates = value;
    },
    onPopupVisibleChange(visible) {
      if (!visible) {
        this.dates = []
      }
    },
    disabledDate(current) {
      const dates = this.dates;
      if (dates && dates.length) {
        const tooLate = dates[0] && Math.abs((new Date(current) - dates[0]) / (24 * 60 * 60 * 1000)) > 7;
        const tooEarly = dates[1] && Math.abs((new Date(current) - dates[1]) / (24 * 60 * 60 * 1000)) > 7;
        return tooEarly || tooLate;
      }
      return false;
    }
  }
}
</script>

尺寸

设置 size 可以使用四种尺寸（mini small medium large）的输入框。高度分别对应 24px、28px、32px、36px。

代码事例

vue

<template>
  <div style="margin-bottom: 20px;">
    <fk-radio-group v-model="size" type='button'>
      <fk-radio value="mini">mini</fk-radio>
      <fk-radio value="small">small</fk-radio>
      <fk-radio value="medium">medium</fk-radio>
      <fk-radio value="large">large</fk-radio>
    </fk-radio-group>
  </div>
  <fk-date-picker
    :size="size"
    style="width: 254px;"
  />
</template>
<script>
export default {
  data() {
    return {
      size: 'small'
    }
  }
}
</script>

额外的页脚

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

代码事例

vue

<template>
  <fk-date-picker style="width: 200px; margin-bottom: 20px">
    <template #extra>Extra footer</template>
  </fk-date-picker>
  <br />
  <fk-range-picker showTime style="width: 360px;">
    <template #extra>Extra footer</template>
  </fk-range-picker>
</template>

禁用

禁用状态。

代码事例

vue

<template>
  <fk-date-picker
    defaultValue="2020-08-08"
    disabled
    style="width: 200px; margin-bottom: 20px;"
  />
  <br />
  <fk-range-picker
    :defaultValue="['2020-08-08', '2020-08-18']"
    disabled
    style="width: 300px; margin-bottom: 20px;"
  />
  <br />
  <fk-range-picker
    :defaultValue="['2020-08-08']"
    :disabled="[true, false]"
    :disabledDate="(current) => dayjs(current).isBefore(dayjs('2020-08-08'))"
    style="width: 300px; margin-bottom: 20px;"
  />
  <br />
  <fk-range-picker
    showTime
    :defaultValue="['2020-08-08 02:02:02']"
    :disabled="[true, false]"
    style="width: 380px;"
  />
</template>
<script>
import dayjs from 'dayjs';
export default {
  setup() {
    return {
      dayjs
    };
  }
}
</script>

定制日期单元格

利用具名插槽 cell 可以定制日期单元格。

代码事例

vue

<template>
  <fk-date-picker>
    <template #cell="{ date }">
      <div class="arco-picker-date">
        <div class="arco-picker-date-value" :style="getCellStyle(date)">
          {{ date.getDate() }}
        </div>
      </div>
    </template>
  </fk-date-picker>
</template>
<script>
export default {
  setup() {
    const highlightDates = [6, 14, 22];
    const highlightStyle = {
      border: '1px solid rgb(var(--arcoblue-6))',
    };
    return {
      getCellStyle(date) {
        return highlightDates.includes(date.getDate()) ? highlightStyle : {}
      }
    }
  }
}
</script>

双向绑定

通过 v-model 实现值的双向绑定

代码事例

vue

<template>
  <fk-space>
    {{value}}
    <fk-date-picker format="MM-DD HH:mm:ss" value-format="MM-DD HH:mm:ss" v-model="value" style="width: 200px;" />
    <fk-range-picker v-model="rangeValue" style="width: 300px;" />
  </fk-space>
</template>
<script>
export default {
  data() {
    return {
      value: Date.now(),
      rangeValue: [Date.now(), Date.now()],
    }
  }
}
</script>

自定义触发元素

自定义触发元素。

代码事例

vue

<template>
  <fk-space>
    <fk-date-picker
      style="width: 268px;"
      v-model="value"
    >
      <fk-button>{{ value || '请选择日期' }}</fk-button>
    </fk-date-picker>
    <fk-range-picker
      style="width: 268px;"
      v-model="rangeValue"
    >
      <fk-button>{{ rangeValue && rangeValue.join(' - ') || '请选择日期范围' }}</fk-button>
    </fk-range-picker>
  </fk-space>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const value = ref();
    const rangeValue = ref();
    return {
      value,
      rangeValue,
    }
  }
}
</script>

只使用面板

只用选择面板，不显示输入框。

代码事例

vue

<template>
  <div>
    <fk-date-picker
      default-value="2019-06-03"
      v-model:pickerValue="pickerValue"
      hide-trigger
      style="width: 268px;"
    >
      <template #cell="{ date }">
        <div class="arco-picker-date">
          <div class="arco-picker-date-value">
            {{ date.getDate() }}11
          </div>
        </div>
      </template>
    </fk-date-picker>
    <fk-range-picker
      :default-value="['2019-08-01', '2020-06-01']"
      v-model:pickerValue="rangePickerValue"
      hide-trigger
      style="width: 560px; margin-top: 20px;"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerValue: null,
      rangePickerValue: null,
    };
  }
};
</script>

API

`Common` Props

参数名	描述	类型	默认值	版本
locale	国际化配置，用于覆盖locale中的 `datePicker` 字段	`Record<string, any>`	`-`
hide-trigger	没有触发元素，只显示选择面板	`boolean`	`false`
allow-clear	是否允许清除	`boolean`	`true`
readonly	是否为只读	`boolean`	`false`
error	是否为错误状态	`boolean`	`false`
size	日期选择器的尺寸	`'mini' \| 'small' \| 'medium' \| 'large'`	`'medium'`
shortcuts	预设时间范围快捷选择	`ShortcutType[]`	`[]`
shortcuts-position	预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景	`'left' \| 'bottom' \| 'right'`	`'bottom'`
position	弹出的框的位置	`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`	`'bl'`
popup-visible	控制弹出框的打开或者关闭状态	`boolean`	`-`
default-popup-visible	默认弹出框是打开或者关闭	`boolean`	`false`
trigger-props	可以传入 `Trigger` 组件的参数	`TriggerProps`	`-`
unmount-on-close	是否在隐藏的时候销毁DOM结构	`boolean`	`true`
placeholder	提示文案	`string`	`-`
disabled	是否禁用	`boolean`	`false`
disabled-date	不可选取的日期	`(current?: Date) => boolean`	`-`
disabled-time	不可选取的时间	`(current: Date) => DisabledTimeProps`	`-`
picker-value (v-model)	面板显示的日期	`Date \| string \| number`	`-`
default-picker-value	面板默认显示的日期	`Date \| string \| number`	`-`
popup-container	弹出框的挂载容器	`string \| HTMLElement`	`-`
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 `format`。	`'timestamp' \| 'Date' \| string`	`-`	1.0.0
preview-shortcut	是否要预览快捷选择的结果	`boolean`	`true`	1.0.0
show-confirm-btn	是否显示确认按钮，`showTime = true` 的时候始终显示。	`boolean`	`false`	1.0.0
disabled-input	是否禁止键盘输入日期	`boolean`	`false`	1.0.0
abbreviation	是否启用缩写	`boolean`	`true`	1.0.0

`Common` Events

事件名	描述	参数
change	组件值发生改变	value: `Date \| string \| number \| undefined` date: `Date \| undefined` dateString: `string \| undefined`
select	选中日期发生改变但组件值未改变	value: `Date \| string \| number` date: `Date` dateString: `string`
popup-visible-change	打开或关闭弹出框	visible: `boolean`
ok	点击确认按钮	value: `Date \| string \| number` date: `Date` dateString: `string`
clear	点击清除按钮	-
select-shortcut	点击快捷选项	shortcut: `ShortcutType`
picker-value-change	面板日期改变	value: `Date \| string \| number` date: `Date` dateString: `string`

`Common` Slots

插槽名	描述	参数	版本
prefix	输入框前缀	-	1.0.0
suffix-icon	输入框后缀图标	-
icon-next-double	双箭头往后翻页图标	-
icon-prev-double	双箭头往前翻页图标	-
icon-next	单箭头往后翻页图标	-
icon-prev	单箭头往前翻页图标	-
cell	自定义日期单元格的内容	date: `Date`
extra	额外的页脚	-

`<date-picker>` Props

参数名	描述	类型	默认值	版本
model-value (v-model)	绑定值	`Date \| string \| number`	`-`
default-value	默认值	`Date \| string \| number`	`-`
format	展示日期的格式，参考字符串解析格式	`string \| ((current: Date) => string)`	`-`
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	2-6 from 2.21.0
show-time	是否增加时间选择	`boolean`	`false`
time-picker-props	时间显示的参数，参考 TimePickerProps	`Partial<TimePickerProps>`	`-`
disabled	是否禁用	`boolean`	`false`
disabled-date	不可选取的日期	`(current?: Date) => boolean`	`-`
disabled-time	不可选取的时间	`(current: Date) => DisabledTimeProps`	`-`
show-now-btn	是否显示 `showTime` 时，选择当前时间的按钮	`boolean`	`false`

`<month-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date \| string \| number`	`-`
default-value	默认值	`Date \| string \| number`	`-`
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY-MM'`

`<year-picker>` Props

参数名	描述	类型	默认值
model-value (v-model)	绑定值	`Date \| string \| number`	`-`
default-value	默认值	`Date \| string \| number`	`-`
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY'`

`<quarter-picker>` Props

参数名	描述	类型	默认值	版本
model-value (v-model)	绑定值	`Date \| string \| number`	`-`
default-value	默认值	`Date \| string \| number`	`-`
format	展示日期的格式，参考字符串解析格式	`string`	`'YYYY-[Q]Q'`
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。	`string`	`'YYYY-MM'`	1.0.0

`<week-picker>` Props

参数名	描述	类型	默认值	版本
model-value (v-model)	绑定值	`Date \| string \| number`	`-`
default-value	默认值	`Date \| string \| number`	`-`
format	展示日期的格式，参考字符串解析格式	`string`	`'gggg-wo'`
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。	`string`	`'YYYY-MM-DD'`	1.0.0
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	2-6 from 2.21.0

`<range-picker>` Props

参数名	描述	类型	默认值	版本
mode	范围选择器的类型	`'date' \| 'year' \| 'quarter' \| 'month' \| 'week'`	`'date'`
model-value (v-model)	绑定值	`(Date \| string \| number)[]`	`-`
default-value	默认值	`(Date \| string \| number)[]`	`-`
picker-value	默认面板显示的日期	`(Date \| string \| number)[]`	`-`
default-picker-value	面板显示的日期	`(Date \| string \| number)[]`	`-`
disabled	是否禁用	`boolean \| boolean[]`	`false`
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	2-6 from 2.21.0
format	展示日期的格式，参考字符串解析格式	`string`	`-`
value-format	值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 `format`。	`'timestamp' \| 'Date' \| string`	`-`	1.0.0
show-time	是否增加时间选择	`boolean`	`false`
time-picker-props	时间显示的参数，参考 TimePickerProps	`Partial<TimePickerProps>`	`-`
placeholder	提示文案	`string[]`	`-`
disabled-date	不可选的日期	`(current: Date, type: 'start' \| 'end') => boolean`	`-`
disabled-time	不可选取的时间	`(current: Date, type: 'start' \| 'end') => DisabledTimeProps`	`-`
separator	范围选择器输入框内的分割符号	`string`	`-`
exchange-time	时间是否会交换，默认情况下时间会影响和参与开始和结束值的排序，如果要固定时间顺序，可将其关闭。	`boolean`	`true`	1.0.0
disabled-input	是否禁止键盘输入日期	`boolean`	`false`	1.0.0
abbreviation	是否启用缩写	`boolean`	`true`

`<range-picker>` Events

事件名	描述	参数
change	组件值发生改变	value: `(Date \| string \| number \| undefined)[] \| undefined` date: `(Date \| undefined)[] \| undefined` dateString: `(string \| undefined)[] \| undefined`
select	选中日期发生改变但组件值未改变	value: `(Date \| string \| number \| undefined)[]` date: `(Date \| undefined)[]` dateString: `(string \| undefined)[]`
popup-visible-change	打开或关闭弹出框	visible: `boolean`
ok	点击确认按钮	value: `Date \| string \| number[]` date: `Date[]` dateString: `string[]`
clear	点击清除按钮	-
select-shortcut	点击快捷选项	shortcut: `ShortcutType`
picker-value-change	面板日期改变	value: `Date \| string \| number[]` date: `Date[]` dateString: `string[]`

ShortcutType

参数名	描述	类型	默认值
label	选项的内容	`string \| number \| (() => VNode)`	`-`
value	选项值	`CalendarValue \| CalendarValue[] \| (() => CalendarValue \| CalendarValue[])`	`-`
format	解析值所使用的格式，参考字符串解析格式	`string`	`-`

字符串解析格式

格式	输出	描述
`YY`	21	两位数的年份
`YYYY`	2021	四位数年份
`M`	1-12	月份，从 1 开始
`MM`	01-12	月份，两位数
`MMM`	Jan-Dec	缩写的月份名称
`MMMM`	January-December	完整的月份名称
`D`	1-31	月份里的一天
`DD`	01-31	月份里的一天，两位数
`d`	0-6	一周中的一天，星期天是 0
`dd`	Su-Sa	最简写的一周中一天的名称
`ddd`	Sun-Sat	简写的一周中一天的名称
`dddd`	Sunday-Saturday	一周中一天的名称
`H`	0-23	小时
`HH`	00-23	小时，两位数
`h`	1-12	小时, 12 小时制
`hh`	01-12	小时, 12 小时制, 两位数
`m`	0-59	分钟
`mm`	00-59	分钟，两位数
`s`	0-59	秒
`ss`	00-59	秒，两位数
`S`	0-9	数百毫秒，一位数
`SS`	00-99	几十毫秒，两位数
`SSS`	000-999	毫秒，三位数字
`Z`	-5:00	UTC 的偏移量
`ZZ`	-0500	UTC 的偏移量，数字前面加上 0
`A`	AM PM	-
`a`	am pm	-
`Do`	1st... 3st	带序号的月份中的某天
`X`	1410715640.579	Unix 时间戳
`x`	1410715640579	Unix 毫秒时间戳

FAQ

关于 `locale` 字段

可以使用组件库提供的语言包配置 locale 字段。

Form 动态表单

SearchForm 查询表单

Table 数据表格

日期选择器 DatePicker

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

基本用法

月份选择器

年份选择器

季度选择器

周选择器

带时间的日期选择

范围选择器

默认值

不可选取的时间

预设时间快捷选择

定制预设范围位置

动态控制选取范围

尺寸

额外的页脚

禁用

定制日期单元格

双向绑定

自定义触发元素

只使用面板

API

`Common` Props

`Common` Events

`Common` Slots

`<date-picker>` Props

`<month-picker>` Props

`<year-picker>` Props

`<quarter-picker>` Props

`<week-picker>` Props

`<range-picker>` Props

`<range-picker>` Events

ShortcutType

字符串解析格式

FAQ

关于 `locale` 字段

日期选择器 DatePicker ​

选择日期。支持年、月、周、日类型，支持范围选择等。 ​

基本用法 ​

月份选择器 ​

年份选择器 ​

季度选择器 ​

周选择器 ​

带时间的日期选择 ​

范围选择器 ​

默认值 ​

不可选取的时间 ​

预设时间快捷选择 ​

定制预设范围位置 ​

动态控制选取范围 ​

尺寸 ​

额外的页脚 ​

禁用 ​

定制日期单元格 ​

双向绑定 ​

自定义触发元素 ​

只使用面板 ​

API ​

Common Props ​

Common Events ​

Common Slots ​

<date-picker> Props ​

<month-picker> Props ​

<year-picker> Props ​

<quarter-picker> Props ​

<week-picker> Props ​

<range-picker> Props ​

<range-picker> Events ​

ShortcutType ​

字符串解析格式 ​

FAQ ​

关于 locale 字段 ​

日期选择器 DatePicker

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

基本用法

月份选择器

年份选择器

季度选择器

周选择器

带时间的日期选择

范围选择器

默认值

不可选取的时间

预设时间快捷选择

定制预设范围位置

动态控制选取范围

尺寸

额外的页脚

禁用

定制日期单元格

双向绑定

自定义触发元素

只使用面板

API

`Common` Props

`Common` Events

`Common` Slots

`<date-picker>` Props

`<month-picker>` Props

`<year-picker>` Props

`<quarter-picker>` Props

`<week-picker>` Props

`<range-picker>` Props

`<range-picker>` Events

ShortcutType

字符串解析格式

FAQ

关于 `locale` 字段