datetime

Datetime
- 安装
- 属性
- 事件
- 插槽
- 样式变量
- 重要提示及已知问题
- 相关 issue
- 贡献者
- 发布日志

Datetime

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

datetime - 图1

二维码

datetime - 图2

Install

安装

局部注册

全局注册

import { Datetime } from 'vux'
export default {
  components: {
    Datetime
  }
}

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

需要在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

属性

名字	类型	默认值	说明	版本要求
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

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

发布日志

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

Datetime

安装

属性

事件

插槽

样式变量

重要提示及已知问题

相关 issue

贡献者

发布日志