日期选择器 DatePicker #

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

基本使用 #

日期选择器的基础使用

月份选择器 #

月份输入器的基础使用。设置type为month即可

周选择器 #

周输入器的基础使用。设置 type 为 week 即可

选择日期范围 #

你可以通过以下例子来学习如何设置一个日期范围选择器

选择月份范围 #

你当然还可以选择一个月的范围

双向绑定 #

通过 v-model 实现值的双向绑定。v-model绑定的值要根据type类型来定义。参考下面示例

不可选取的时间 #

使用 disabled-date 可以禁用某些日期

日期格式 #

1.使用 input-label-format 指定输入框显示时间的格式

2.使用 model-value-format 指定绑定值的格式。默认情况下，组件接受并返回Date对象

3.format格式说明

每周的第一天开始于周几 #

使用 day-start-of-week 可以重置第一天开始于周几

自定义内容 #

弹出框的内容是可以自定义的，你可以使用 cell 插槽来获取到当前单元格的数据

DateCell #

export interface DateCell {
  value: string | number
  label: string | number
  date: Date
  isNow: boolean
  isCur: boolean
  isPrev: boolean
  isNext: boolean
  isRange: boolean
  isSelect: boolean
  isRangeStart: boolean
  isRangeEnd: boolean
  isDisabled: boolean
  format: (date?: Date, formatter?: string) => string | undefined
}

API #

Checkbox Attributes #

Events #

Slots #