Datetime

Datetime

demo 原始链接demo 源码编辑文档组件源码

datetime - 图1

二维码

datetime - 图2

Install

安装

局部注册

全局注册

  1. import { Datetime } from 'vux'
  2. export default {
  3. components: {
  4. Datetime
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Datetime } from 'vux'
  4. Vue.component('datetime', Datetime)

需要在Group组件里使用

该组件支持以plugin形式调用:

  1. // 以 plugin 形式使用时,请在入口处引入:
  2. import { DatetimePlugin } from 'vux'
  3. Vue.use(DatetimePlugin)
  4. // 组件内使用
  5. this.$vux.datetime.show({
  6. value: '', // 其他参数同 props
  7. onHide () {
  8. const _this = this
  9. },
  10. onShow () {
  11. const _this = this
  12. }
  13. })
  14. this.$vux.datetime.hide()

API

属性

名字类型默认值说明版本要求
formatstringYYYY-MM-DD时间格式,不支持特殊字符,只能类似 YYYY-MM-DD HH:mm 这样的格式(不支持秒 ss), 另外支持 YYYY-MM-DD A 这样的格式(A为上下午)
titlestring标题
valuestring表单值,v-model绑定
inline-descstring描述字符
placeholderstring提示文字,当value为空时显示
min-yearnumber可选择的最小年份
max-yearnumber可选择的最大年份
min-hournumber0限定小时最小值
max-hournumber23限定小时最大值
confirm-textstringok(确认)确认按钮文字
cancel-textstringcancel(取消)取消按钮文字
clear-textstring显示在中间的自定义按钮的文字
year-rowstring{value}年份的渲染模板
month-rowstring{value}月份的渲染模板
day-rowstring{value}日期的渲染模板
hour-rowstring{value}小时的渲染模板
minute-rowstring{value}分钟的渲染模板
start-datestring限定最小日期,格式必须为 YYYY-MM-DD,注意该限制只能限定到日期,不能限定到小时分钟。小时限定请使用min-hourmax-hour
end-datestring限定最大日期,格式必须为 YYYY-MM-DD,注意该限制只能限定到日期,不能限定到小时分钟
requiredbooleanfalse是否必填
display-formatfunction自定义显示值v2.1.1-rc.11
readonlystring只读模式,显示类似于 cellv2.3.6
showboolean控制显示,要求 vue^2.3v2.3.7
minute-listarray定义分钟列表,比如 ['00', '15', '30', '45']v2.3.7
hour-listarray定义小时列表,比如 ['09', '10', '11', '12']v2.3.7
default-selected-valuestring设置默认选中日期,当前 value 为空时有效v2.4.1
compute-hours-functionfunction动态设置小时列表,参数为 (value, isToday, generateRange)v2.5.5
compute-days-functionfunction动态设置日期列表,参数为 ({year, month, min, max}, generateRange)v2.6.1
order-mapobject自定义列顺序, 如 {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

插槽

名字说明版本要求
默认插槽触发元素内容
titletitle slotv2.3.6

Variables

样式变量

名字默认值说明继承自变量
@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

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 95,贡献人数 11
Haixing Huairyland__FresHmaNLinHaobinmaiiunclaylyh2668Qiongrong Jiang万刚项振兴刘杨

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