Datetime 日期

优质

小牛编辑

135浏览

2023-12-01

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)`	-
-	-	-	-