日期

1. 适用场景

需要选择日期或时间时，适用于加班、出差等场景。

https://www.yuque.com/yida/support/snftao

2. 基础功能

可设置日期默认值、日期格式、一键清除、日期区间、高级功能自定义区间。

2.1 设置固定时间和日期格式

2.1.1 默认值（固定时间）

日期组件支持默认值，设置后，在表单提交时，固定展示该默认值（设置了默认值后，也可手动选择日期）。

路径：组件 >> 属性 >> 默认值

注：默认值显示的是「年-月-日」，但实际在组件里面显示的内容，是以我们设置的具体格式为准。

效果如图：

日期默认值

2.1.2 日期格式

日期默认格式是：「年-月-日」，也可以自定义日期格式。

效果如图：

日期格式

2.2 可选时间区间

我们可以对选择的时间做出限制，适用于请假、加班等场景。

效果如图：

可选时间区间

2.2.1 时间区间场景展示

如果我们要限制只能请今天之后的假，我们可以设置时间区间为「可选今天之后（含今天）」，设置后，今天之前的日期会变成灰色, 变为不可选状态，其他区间同理 。

效果如图：

2.2.2 高级功能自定义区间配置及场景

可以通过写 JS 的方式，实现只能选择指定时间段内的时间，适用于预约、处理特殊业务等场景。

路径：属性 >> 可选时间区间 >> 选择自定义 >> 绑定动作

绑定动作

我们可以绑定一个自定义动作, 固定允许选择的时间范围，示例动作如下 (只能选择 7 天之内的日期)。

具体配置如下：

1）点击绑定动作后，会出现以下界面，参考截图的步骤。

2）点击确定后会出现一下界面，参考截图的步骤：

3）删除后，可以把下面的代码复制到 JS 界面，然后点击保存，参考截图的步骤：

以下代码可以参考使用（可复制）

 export function disabledDate(current) {
   // 判断是未来7天（不包含当天）的日期
   if (current < Date.now() + 24 * 3600 * 1000 * 7 && current >Date.now()) {
     // 这里返回 false 代表不执行disable逻辑，可被选择
     return false;
   }
   // 这里返回 true 代表执行disable逻辑，不可被选择
   return true; 
}

配置好了之后，只能选择七天内的时间，效果如图：

2.3 清除按钮

开启了清除按钮后，若选中的时间有误，可以点击 × ，一键清除，效果如图：

3. 常见问题

3.1 为什么修改了日期后，时间被重置了？

当我们选择格式为「年-月-日-时-分」或者「年-月-日-时-分-秒」，属性面板下面才会出现一个「每次选择日期是否重置时间」的功能，效果如图：

该功能默认是关闭的，也就是说每次修改日期时，「时-分」会保持原来的时间，但是如果打开这个按钮，则每次重新修改了日期, 「时-分」 会被重置到 「00:00」。

效果如下 ：

3.2 如何把两个日期组件之间的差值转化为小时 ？

请参考以下设置

3.3 在单行文本内输入周几，下面的日期组件就需要显示这个周几是本周的几号 ？

用零代码暂时实现不了这个功能，可以通过公式获取到当前日期，在使用 JS 判断目标星期与当前日期做差，计算两者相差多少天，再使用 JS 判断目标星期是多少号即可。

3.4 表单上添加一个日期区间的组件，第一个时间选择 12 号 4 点，第二个想要选择12 号 4 点以后的时间，但是现在第二个只能从 13 号开始选择，目前只能是以天为维度的，我希望可以以小时为维度，是否可以支持 ？

目前日期区间组件只能精确匹配到天，辛苦提交需求。

3.5 怎么计算两个日期相隔几天几小时几分钟？

请查看 这篇文档 详细操作说明。

3.6 实现时钟秒数走动的一种效果

您好，这个可以使用 JS 代码实现，在表单内添加一个日期组件，然后复制下面的代码到 didMount() 方法里面，默认就会加载出来

注意：下面的唯一标识需要是日期组件的唯一标识

 setInterval( function(){ 
var dt = new Date(); 
var y = dt.getFullYear(); 
var M = dt.getMonth()+ 1; 
var d = dt.getDate(); 
var h = dt.getHours(); 
var m = dt.getMinutes(); 
var s = dt.getSeconds(); 
//alert("当前时间：" + y + "年"+M+"月"+d +"日"+ h + "时" + m + "分" + s + "秒");
 document.getElementById( "唯一标识").innerHTML = "当前时间：" + y + "年" + M + "月" + d + "日" + h + "时" + m + "分" + s + "秒"
 }, 1000); 

JS 面板

最终效果：

3.7 如何根据字段值发生变化实时更新日期组件值为当前时间？

在值发生变化的字段上面新建动作 >> 值发生变化时

复制以下代码

export function onChange({ value }) {
  this.$('日期组件唯一标识').setValue(Date.parse(new Date()))
}