日期

介绍

基本表单组件，用于用户选择日期。

API

Props

参数名	描述	类型	默认值
status	状态	'default' |'disabled'| 'hide'| 'readonly'	'default'
title	标题	string	'日期'
showLabel	显示标题	boolean	true
placeholder	占位提示	string	请选择
width	字段占比	'25%'|'50%'|'75%'|'100%'	'100%'
labelWidth	标签宽度	string	-
name	数据字段	string	${组件编码}_${长度为8的随机字符串}
type	选择器类型	'date'|'week'|'month'|'quarter'|'year'	'date'
format	格式	'YYYY-MM-DD'|'YYYY-MM-DD HH'|'YYYY-MM-DD HH:mm'|'YYYY-MM-DD HH:mm:ss'	'YYYY-MM-DD'
valueType	默认值	'custom' | 'formula'	'custom'
value	编辑默认值	string | {formulaValue:string,value:string}	-
allowClear	清除按钮	boolean	false
showNowBtn	是否显示选择当前时间的按钮	boolean	true
disabledDate	不可选取的日期	Function	-
disabledTime	不可选取的时间	Function	-
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
customRender	自定义日期单元格	boolean	false
renderFunc	自定义日期单元格渲染函数	Function	-
extra	补充说明	string	-
tip	气泡提醒	string	-
validate	校验	Validate	-
loop	循环， 循环渲染设置	Loop	-

Events

事件名	描述	参数
onChange	值发生改变时	ctx params: {value: string} loop:LoopParams
onClear	点击清除按钮时	ctx loop:LoopParams

常见场景配置

不可选取的日期示例

以限制用户只能选择当前日期前10天内的日期为例：

function disabledDate(ctx, params) {
  //校验日期是否不可选取，返回布尔值
  let currentIndex = params.current.valueOf();
  // 获取当前日期
  const nowDaysAfter = new Date();
  // 获取前一天的时间戳
  nowDaysAfter.setDate(nowDaysAfter.getDate() - 1);
  const timestampEnd = nowDaysAfter.valueOf();
  // 获取十天前的时间戳
  const tenDaysAgo = new Date();
  tenDaysAgo.setDate(tenDaysAgo.getDate() - 10);
  const timeStart = tenDaysAgo.valueOf();
  if (timestampEnd < currentIndex || timeStart > currentIndex) return true;
  return false;
}