表单 - datetime - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

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

样式变量

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