默认主题
日期选择

示例

基本用法

基本用法和禁用状态

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
快捷方式

通过shortcuts属性可以指定快捷方式,数组的成员为对象,形如:{label, value}:

  1. label String | vNode | Function 指定要展示的文案,可以是返回文案的函数
  2. value Function 指定选中后的值(日期对象),如果是范围选择,返回数组

组件内置了一些快捷方式,可以直接使用,如本例所示

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
可清空

添加clearable属性,可以清空当前日期。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
~


~
最大和最小日期

通过maxDateminDate可以给组件指定最大和最小选择日期。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
禁用指定日期

通过disabledDate属性,可以定义个方法,来指定哪些日期被禁止选择。组件会将一个日期字符串作为方法的参数,如果方法返回“真”则禁用掉该日期,否则不禁用。

@since v1.1.0 会传入当前日期对象Dayjs作为第2个参数

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
value:
value:
value:
格式化日期

组件内部使用dayjs处理日期对象,通过format属性,可以指定日期格式化字符串,默认的格式为:

  1. date YYYY-MM-DD
  2. datetime YYYY-MM-DD HH:mm:ss
  3. year YYYY
  4. month YYYY-MM

format会同时格式化展示的字符串和最终的value值,如果你想分别对它们格式化,可以通过showFormat格式化展示的日期,通过valueFormat格式化value值,并且它们的优先级比format

如果你想给组件传入初始value值,但是该字符串不是默认格式,则必须指定format或者valueFormat。同时该属性也可以作用于maxDate minDate属性

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
You selected:

You selected:
日期多选

添加multiple属性,即可支持日期多选。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
选择日期和时间

type属性指定为datetime,即可让日期支持选择时间。通过disabledHours & disabledMinutes & disabledSeconds可以禁用时分秒的选择。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
选择年或月

type属性指定为yearmonth可以只选择“年”或“月”

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
You selected:

You selected:
日期范围选择
index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
value 当前选中的日期字符串 String undefind
clearable 是否能清空当前值 Boolean false
maxDate 最大可选日期,可以为日期字符串或日期对象 String | Date undefind
minDate 最小可选日期,可以为日期字符串或日期对象 String | Date undefind
placeholder 占位文字 String "请选择日期"
disabled 是否禁用 Boolean false
disabledDate 该属性值是一个函数,用于定义那些日期被禁止选择,函数参数为日期字符串,返回true则表示禁用该日期 Function (date) => false
multiple 是否支持多选 Boolean false
size 组件尺寸 "large" | "default" | "small" | "mini" "default"
type 组件类型:"date" 只选择日期;"datetime" 选择日期和时间;"year" 选择年份;"month" 选择月份 "date" | "datetime" | "year" | "month" "date"
disabledHours 禁用小时选择 Boolean false
disabledMinutes 禁用分钟选择 Boolean false
disabledSeconds 禁用秒钟选择 Boolean false
shortcuts 指定快捷方式 Array<Object> undefined
range 是否选择日期范围 Boolean false
container 指定弹出选择层追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined
format 指定日期格式化字符串 String YYYY-MM-DD HH:mm:ss
valueFormat 指定value值日期格式化字符串 String undefined
showFormat 指定展示的日期格式化字符串 String undefined

静态方法

方法名 说明 参数 返回值
getDateString 将日期对象转为形如2019-02-01 12:00:00的字符串 1. date 将要转化的日期对象
2. type "year": 只返回年份;"month":返回年份和月份;"datetime":返回日期和时间字符串;*:否则返回日期字符串
String
createDate 传入形如2019-02-01 12:00:002019-02-01的字符串,返回日期对象(跨浏览器) dateString Date