Question

import { Datetime } from 'feui';
components: {
  [Datetime.name]: Datetime
},
methods: {
  change (value) {
    console.log('change', value)
  },
}

代码演示

基础用法

<fe-group title="默认格式: YYYY-MM-DD">
  <fe-datetime v-model="value1" @on-change="change" title="生日"></fe-datetime>
</fe-group>
<fe-group title="全部格式: YYYY-MM-DD HH:mm:ss">
  <fe-datetime v-model="value1" @on-change="change" format="YYYY-MM-DD HH:mm:ss" title="生日"></fe-datetime>
</fe-group>

定义小时分钟列表

<fe-group title="定义小时分钟列表">
  <fe-datetime v-model="hourListValue" format="YYYY-MM-DD HH:mm" 
    :hour-list="['09', '10', '11', '12', '13', '14', '15', '16']" 
    :minute-list="['00', '15', '30', '45']" 
    @on-change="change" title="生日">
  </fe-datetime>
</fe-group>

只读模式

<fe-group title="Readonly">
  <fe-datetime v-model="valueReadonly" :readonly="readonly" 
  @on-change="change" title="生日"></fe-datetime>
</fe-group>

设置开始时间和结束日

<fe-group title="设置开始时间和结束日期 2015-11-11 ~ 2018-11-11">
  <fe-datetime v-model="limitHourValue" :start-date="startDate" :end-date="endDate" 
    format="YYYY-MM-DD HH:mm" @on-change="change" title="开始时间">
  </fe-datetime>
</fe-group>

API

参数	说明	类型	默认值	可选值
value	表单值，v-model绑定	String	-	-
title	标题	String	-	-
format	时间格式	String	YYYY-MM-DD	YYYY-MM-DD HH:mm、YYYY-MM-DD HH:mm:ss等
inline-desc	描述字符	String	-	-
placeholder	提示文字，当value为空时显示	String	-	-
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	限定最小日期，格式必须为 YYYY-MM-DD	String	-	-
end-date	限定最大日期，格式必须为 YYYY-MM-DD	String	-	-
required	是否必填	Boolean	false	false,true
display-format	自定义显示值	Function	-	-
readonly	只读模式，显示类似于 cell	Boolean	false	false,true
show	控制显示，要求 vue^2.3	Boolean	false	false,true
hour-list	定义小时列表	Array	-	-
minute-list	定义分钟列表	Array	-	-
default-selected-value	设置默认选中日期，当前 value 为空时有效	String	-	-
compute-days-function	动态设置日期列表，参数为 ({year, month, min, max}, generateRange)	Function	-	-
compute-hours-function	动态设置小时列表，参数为 (value, isToday, generateRange)	Function	-	-
-	-	-	-	-

Slots

Slot名	说明	备注
default	触发元素内容	-
title	title slot	-
-	-	-

Events

事件名	参数	说明	备注
on-change	value	表单值变表单值变化时触发, 参数(newVal)	-
on-clear	-	点击显示在中间的自定义按钮时触发	-
on-show	-	弹窗显示时触发	-
on-hide	type	弹窗关闭时触发	type 是[cancel, confirm]其中之一
on-confirm	-	点击确定按钮时触发，等同于事件on-hide(confirm)	-
on-cancel	-	点击取消按钮或者遮罩时触发，等同于事件on-hide(cancel)	-
-	-	-	-