需要在Group组件里使用
该组件支持以plugin形式调用：
// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)
// 组件内使用
this.$vux.datetime.show({
value: '', // 其他参数同 props
onHide () {
const _this = this
},
onShow () {
const _this = this
}
})
this.$vux.datetime.hide()
API
Variables
重要提示及已知问题
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| format | string | YYYY-MM-DD | 时间格式，不支持特殊字符，只能类似 YYYY-MM-DD HH:mm 这样的格式（不支持秒 ss）, 另外支持 YYYY-MM-DD A 这样的格式(A为上下午) | -- |
| title | string | 标题 | -- | |
| value | string | 表单值，v-model绑定 | -- | |
| inline-desc | string | 描述字符 | -- | |
| placeholder | string | 提示文字，当value为空时显示 | -- | |
| min-year | number | 可选择的最小年份 | -- | |
| max-year | number | 可选择的最大年份 | -- | |
| min-hour | number | 0 | 限定小时最小值 | -- |
| max-hour | number | 23 | 限定小时最大值 | -- |
| confirm-text | string | ok(确认) | 确认按钮文字 | -- |
| cancel-text | string | cancel(取消) | 取消按钮文字 | -- |
| clear-text | string | 显示在中间的自定义按钮的文字 | -- | |
| year-row | string | {value} | 年份的渲染模板 | -- |
| month-row | string | {value} | 月份的渲染模板 | -- |
| day-row | string | {value} | 日期的渲染模板 | -- |
| hour-row | string | {value} | 小时的渲染模板 | -- |
| minute-row | string | {value} | 分钟的渲染模板 | -- |
| start-date | string | 限定最小日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟。小时限定请使用min-hour和max-hour | -- | |
| end-date | string | 限定最大日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟 | -- | |
| required | boolean | false | 是否必填 | -- |
| display-format | function | 自定义显示值 | v2.1.1-rc.11 | |
| readonly | string | 只读模式，显示类似于 cell | v2.3.6 | |
| show | boolean | 控制显示，要求 vue^2.3 | v2.3.7 | |
| minute-list | array | 定义分钟列表，比如 ['00', '15', '30', '45'] | v2.3.7 | |
| hour-list | array | 定义小时列表，比如 ['09', '10', '11', '12'] | v2.3.7 | |
| default-selected-value | string | 设置默认选中日期，当前 value 为空时有效 | v2.4.1 | |
| compute-hours-function | function | 动态设置小时列表，参数为 (value, isToday, generateRange) | v2.5.5 | |
| compute-days-function | function | 动态设置日期列表，参数为 ({year, month, min, max}, generateRange) | v2.6.1 | |
| order-map | object | 自定义列顺序, 如 {year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6} | v2.9.0 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 表单值变化时触发, 参数 (newVal) | -- |
| @on-clear | -- | 点击显示在中间的自定义按钮时触发 | -- |
| @on-show | -- | 弹窗显示时触发 | -- |
| @on-hide | (type), type is one of [cancel, confirm] | 弹窗关闭时触发 | v2.7.4 |
| @on-cancel | -- | 点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel) | v2.7.4 |
| @on-confirm | (value) v2.9.0 支持该参数 | 点击确定按钮时触发，等同于事件 on-hide(confirm) | v2.7.4 |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 触发元素内容 | -- |
| title | title slot | v2.3.6 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @datetime-header-item-font-color | #04BE02 | -- | @theme-color |
| @datetime-header-item-cancel-font-color | #828282 | -- | |
| @datetime-header-item-confirm-font-color | #04BE02 | -- | @datetime-header-item-font-color |
重要提示及已知问题
- Q是否支持秒(ss)
不支持，目前常用需求场景并没有需要精确到秒。
- Qon-confirm 事件获取不到正确的值
在
v2.9.0之前 on-confirm 不会附带当前值参数，你需要在this.$nextTick后获取。 相关 issue: #2632
Changelog
发布日志
- v2.9.0 [feature] 支持使用 order-map 自定义列顺序 #2300
- v2.9.0 [fix] 修复遮罩导致页面滚动 #2593
- v2.9.0 [feature] 事件 on-confirm 添加当前值 #2632
- v2.9.0 [fix] 在 nextTick 后触发 on-confirm 事件 #2632
- v2.9.0 [feature] 支持格式 YYYY-MM-DD A 选择上下午 #2627 @jack87918
- v2.7.8 [fix] 修复 `on-hide` 事件触发两次的问题 #2379
- v2.7.8 [fix] 修复初始化时 `show` 值为 `true` 无效的问题
- v2.7.6 [fix] 列的值使用number类型，修正绑定值与datetimepicker值不相等 #2296
- v2.7.4 [feature] 支持事件 on-confirm on-cancel #2221
- v2.7.2 [enhance] 当指定结束日期但未指定开始日期时使用默认年第一天作为开始日期 #2158
- v2.7.1 [fix] 修复插件使用时 less 变量不生效问题 #2152
- v2.7.0 [fix] 修复服务端渲染多语言 bug
- v2.7.0 [fix] 修复 readonly 为 true 时点击还会显示弹窗的问题 #2079
- v2.6.1 [feature] 支持属性 compute-days-function 用以动态设置日期 #1992
- v2.6.0 [fix] 修复取消文字、确认文字国际化显示问题
- v2.5.11 [fix] 修复 :show.sync 设为 false 无效 #1918
- v2.5.11 [fix] 修复特定情况下月份变化不会触发小时重新渲染的问题
- v2.5.10 [feature] 值文字颜色受控于 @cell-value-color #1874
- v2.5.9 [fix] 修复格式为 YYYY 时的报错 #1861
- v2.5.5 [feature] 支持动态设置小时列表 #1749
- v2.5.5 [enhance] 更加流畅的遮罩层动画
- v2.4.1 [fix] readonly 值变化时重新渲染 #1593
- v2.4.1 [feature] 支持通过 prop:default-selected-value 设置默认选中日期 #1576
- v2.4.0 [enhance] 统一弹窗头部样式，和 popup-picker 一致
- v2.3.7 [feature] 可以使用 :show.sync 来控制控件显示 #1358
- v2.3.7 [fix] 修复格式为 YYYY-MM 时的日期范围错误 #1528
- v2.3.7 [feature] 支持通过 prop:hourList prop:minuteList 自定义小时和分钟列表
- v2.3.7 [fix] 开始日期年份应该覆盖最小年份(minYear) #1358
- v2.3.6 [feature] 添加 slot:title
- v2.3.6 [feature] 添加 prop:readonly
- v2.3.6 [fix] 修复 scroller 支持数字类型引入的 bug #1406
- v2.3.4 [fix] 初始化时不触发 on-change 事件
- v2.2.1-rc.8 [enhance] 修改 prop:format 会触发重新渲染
- v2.2.0 [fix] 在 nextTick 回调渲染 picker 避免赋值报错 #1180
- v2.1.1-rc.11 [feature] 支持格式化显示 prop:display-format #1086 @greedying
- v2.1.1-rc.7 [enhance] 支持 PC 上鼠标选择 #1039 @michael829
- v2.1.0 [fix] 修复`label`宽度没有受限于`group`设置
- v2.1.0-rc.46 [feature] 支持配置`取消`和`确定`的文字颜色 #715 @greedying