> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 日期
> 本页面介绍了日期组件的基础信息、功能设置（如默认值、日期格式、时间区间等）以及常见问题解答，适用于需要选择日期或时间的场景。
## 1. 适用场景
需要选择日期或时间时，适用于加班、出差等场景，日期组件选择的都是当地时间。
[组件基础信息](/zh/yida/form/snftao)
组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/interface)查看
## 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](/zh/open/yida/components/form/dateField)
配置好了之后，只能选择七天内的时间，效果如图：
### 2.3 清除按钮
开启了清除按钮后，若选中的时间有误，可以点击 × ，一键清除，效果如图：
## 3. 常见问题
当我们选择格式为「年-月-日-时-分」或者「年-月-日-时-分-秒」，属性面板下面才会出现一个「每次选择日期是否重置时间」的功能，效果如图：
该功能默认是关闭的，也就是说每次修改日期时，「时-分」会保持原来的时间，但是如果打开这个按钮，则每次重新修改了日期, 「时-分」 会被重置到 「00:00」。
效果如下 ：
请参考以下设置
用零代码暂时实现不了这个功能，可以通过公式获取到当前日期，在使用 JS 判断目标星期与当前日期做差，计算两者相差多少天，再使用 JS 判断目标星期是多少号即可。
目前日期区间组件只能精确匹配到天，辛苦提交需求。
请查看 [**这篇文档**](https://www.yuque.com/yida/subject/hi4p3r) 详细操作说明。
### 3.6 实现时钟秒数走动的一种效果
您好，这个可以使用 JS 代码实现，在表单内添加一个日期组件，然后复制下面的代码到 didMount() 方法里面，默认就会加载出来
注意：下面的唯一标识需要是日期组件的唯一标识
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
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 面板
最终效果：
在值发生变化的字段上面新建动作 >> 值发生变化时
复制以下代码
```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onChange({ value }) {
this.$('日期组件唯一标识').setValue(Date.parse(new Date()))
}
```
通常计算出两个日期相隔天数都是整数，但当开始时间和结束时间是同一天的时候就会是 0 天，若想折算成 0.几天，直接复制以下代码，将组件替换成表单中的日期组件即可。
```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
{"text":"DAYS(DATE(开始时间),DATE(结束时间))+TIME(HOUR(DATE(结束时间)),MINUTE(DATE(结束时间)),SECOND(DATE(结束时间)))-TIME(HOUR(DATE(开始时间)),MINUTE(DATE(开始时间)),SECOND(DATE(开始时间)))","marks":[{"from":{"line":0,"ch":10,"sticky":null},"to":{"line":0,"ch":16,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":23,"sticky":null},"to":{"line":0,"ch":29,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":47,"sticky":null},"to":{"line":0,"ch":53,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":68,"sticky":null},"to":{"line":0,"ch":74,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":89,"sticky":null},"to":{"line":0,"ch":95,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":114,"sticky":null},"to":{"line":0,"ch":120,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":135,"sticky":null},"to":{"line":0,"ch":141,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":156,"sticky":null},"to":{"line":0,"ch":162,"sticky":null},"value":"dateField_l0g14aqu","invalid":false}],"isCmData":true}
```
