DatetimePicker 日期选择器
使用指南
适用于日期时间选择场景的特定选择器。
代码演示
与thinking-ui 2.0版组件的区别以及迁移
按照新的日期时间选择器组件规范修改相关样式
- 新增日期范围选择器
H3DatetimeRangePicker
- 废弃的Props:
round
API - H3DatetimePicker
Prop - H3DatetimePicker
属性 | 说明 | 类型 | 默认值 |
visible | 是否显示,v-model 绑定值 | Boolean | false |
maskClosable | 点击蒙层是否可触发关闭 | Boolean | false |
mask | 是否显示透明蒙层,防止触摸穿透 | Boolean | true |
maskCls | mask蒙层自定义class | string | 无 |
wrapCls | wrap弹窗内容区域的自定义class | string | 无 |
getRenderContainer | 把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector 查找 | Function=> Node / String | document.body |
title | 标题 | string | - |
cancelText | 第一个按钮文本 | string | '取消' |
clearText | 第二个按钮文本 | string | '' |
extraText | 第三个按钮文本 | string | '' |
confirmText | 第四个按钮文本 | string | '确定' |
value | 选中的数据,可以是Date 对象或者符合format 格式的字符串 | date, string | new Date() |
startDate | 选择范围的开始时间,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date(1980, 0, 1, 0, 0, 0) |
endDate | 选择范围的结束时间,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date(今年 + 60, 11, 31, 23, 59, 59) |
format | 时间格式,根据时间格式控制控件显示列数,年:YYYY, 月:MM|M, 日:DD|D, 时:HH|H, 分:mm|m, 秒:ss|s | string | 'YYYY-MM-DD' |
mode | datetime|time ,为time 时,控制颗粒度为时分秒,此时startDate endDate 失效,通过startTime endTime 来控制开始结束范围,若需要显示指定的年月日可以通过timeBaseDate 来控制 | string | 'datetime' |
timeBaseDate | mode=time 时启用,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date() |
startTime | mode=time 时启用,00:00:00 ~ 23:59:59 之间开始的秒数 | number | 0 |
endTime | mode=time 时启用,00:00:00 ~ 23:59:59 之间结束的秒数 | number | 24 * 60 * 60 - 1 |
Event - H3DatetimePicker
事件名 | 说明 | 参数 |
toggle | 切换显示时触发,v-model 绑定事件 | value |
show | 显示时回调 | - |
hide | 关闭时回调 | - |
select | 当点击确认按钮或清空按钮时的回调 | (value, Date) |
extra | 当点击其它按钮的回调, value为当前日期 | (value, Date) |
cancel | 当点击取消按钮及蒙层回调 | - |
API - H3DatetimeRangePicker
Prop - H3DatetimeRangePicker
属性 | 说明 | 类型 | 默认值 |
visible | 是否显示,v-model 绑定值 | Boolean | false |
maskClosable | 点击蒙层是否可触发关闭 | Boolean | false |
mask | 是否显示透明蒙层,防止触摸穿透 | Boolean | true |
maskCls | mask蒙层自定义class | string | 无 |
wrapCls | wrap弹窗内容区域的自定义class | string | 无 |
getRenderContainer | 把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector 查找 | Function=> Node / String | document.body |
title | 标题 | string | - |
cancelText | 第一个按钮文本 | string | '取消' |
clearText | 第二个按钮文本 | string | '' |
extraText | 第三个按钮文本 | string | '' |
confirmText | 第四个按钮文本 | string | '确定' |
value | 选中的数据,可以是Date 对象或者符合format 格式的字符串组成的数组 | Array | - |
startDate | 选择范围的开始时间,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date(1980, 0, 1, 0, 0, 0) |
endDate | 选择范围的结束时间,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date(今年 + 60, 11, 31, 23, 59, 59) |
format | 时间格式,根据时间格式控制控件显示列数,年:YYYY, 月:MM|M, 日:DD|D, 时:HH|H, 分:mm|m, 秒:ss|s | string | 'YYYY-MM-DD' |
mode | datetime|time ,为time 时,控制颗粒度为时分秒,此时startDate endDate 失效,通过startTime endTime 来控制开始结束范围,若需要显示指定的年月日可以通过timeBaseDate 来控制 | string | 'datetime' |
timeBaseDate | mode=time 时启用,可以是Date 对象或者能转成Date 的字符串 | date, string | new Date() |
startTime | mode=time 时启用,00:00:00 ~ 23:59:59 之间开始的秒数 | number | 0 |
endTime | mode=time 时启用,00:00:00 ~ 23:59:59 之间结束的秒数 | number | 24 * 60 * 60 - 1 |
Event - H3DatetimeRangePicker
事件名 | 说明 | 参数 |
toggle | 切换显示时触发,v-model 绑定事件 | value |
show | 显示时回调 | - |
hide | 关闭时回调 | - |
select | 当点击确认按钮或清空按钮时的回调 | (value) |
cancel | 当点击取消按钮及蒙层回调 | - |