Skip to main content

​
1. 适用场景

需要选择日期或时间时，适用于加班、出差等场景，日期组件选择的都是当地时间。 组件基础信息
组件属性以及使用和示例请点击此处查看

​
2. 基础功能

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

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

​
2.1.1 默认值（固定时间）

日期组件支持默认值，设置后，在表单提交时，固定展示该默认值（设置了默认值后，也可手动选择日期）。 路径：组件 >> 属性 >> 默认值 注：默认值显示的是「年-月-日」，但实际在组件里面显示的内容，是以我们设置的具体格式为准。 效果如图：
日期默认值
2.1.2 日期格式
日期默认格式是：「年-月-日」，也可以自定义日期格式。 效果如图：
日期格式

​
2.2 可选时间区间

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

​
2.2.1 时间区间场景展示

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

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

可以通过写 JS 的方式，实现只能选择指定时间段内的时间，适用于预约、处理特殊业务等场景。 路径：属性 >> 可选时间区间 >> 选择自定义 >> 绑定动作
绑定动作 我们可以绑定一个自定义动作, 固定允许选择的时间范围，示例动作如下 (只能选择 7 天之内的日期)。 具体配置如下： 1）点击绑定动作后，会出现以下界面，参考截图的步骤。
2）点击确定后会出现一下界面，参考截图的步骤：
3）删除后，编写 JS 代码，然后点击保存，参考截图的步骤，代码请参考： 开发者中心：https://docs.aliwork.com/docs/developer/components/form/dateField
配置好了之后，只能选择七天内的时间，效果如图：

​
2.3 清除按钮

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

​
3. 常见问题

当我们选择格式为「年-月-日-时-分」或者「年-月-日-时-分-秒」，属性面板下面才会出现一个「每次选择日期是否重置时间」的功能，效果如图：
该功能默认是关闭的，也就是说每次修改日期时，「时-分」会保持原来的时间，但是如果打开这个按钮，则每次重新修改了日期, 「时-分」 会被重置到 「00:00」。效果如下 ：
请参考以下设置
用零代码暂时实现不了这个功能，可以通过公式获取到当前日期，在使用 JS 判断目标星期与当前日期做差，计算两者相差多少天，再使用 JS 判断目标星期是多少号即可。
目前日期区间组件只能精确匹配到天，辛苦提交需求。
请查看 这篇文档 详细操作说明。

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

您好，这个可以使用 JS 代码实现，在表单内添加一个日期组件，然后复制下面的代码到 didMount() 方法里面，默认就会加载出来 注意：下面的唯一标识需要是日期组件的唯一标识
JS 面板 最终效果：
在值发生变化的字段上面新建动作 >> 值发生变化时
复制以下代码
通常计算出两个日期相隔天数都是整数，但当开始时间和结束时间是同一天的时候就会是 0 天，若想折算成 0.几天，直接复制以下代码，将组件替换成表单中的日期组件即可。