> ## 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. 适用场景

需要选择两个日期的场景，例如请假、 出差时间、办理业务时间等适用。

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/interface)查看
</Note>

## 2. 基础功能

### 2.1 日期格式

可以设置日期的显示格式

**路径**：组件 >> 属性 >> 显示格式

当选择了格式为年-月-日时，展示效果如下（其他格式同理）：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639031355650-4e8ea498-b91f-4121-a4a7-bae95b4e4644.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618457501161-6d2deced-e574-4272-ae18-9c0a0ad7b52f.png)
</Frame>

### 2.2 设置固定时间（默认值）

可以给日期区间设置一个固定的值，设置了默认值后，日期区间组件会直接展示我们设置的默认值。（设置了默认值后，也可手动选择日期）。

**路径**：属性 >> 默认值

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639031581180-187ba4bf-5903-414a-a2be-38e9a3d80524.png)
</Frame>

设置默认值时，默认格式为「年-月-日 00:00:00」，但组件实际的显示是以设置的「显示格式」为准的。

效果展示如下：

当我们设置的格式为年-月-日

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639031627489-c90e69cf-66f7-4193-bed3-ed63e916802a.png)
</Frame>

实际显示的日期格式如图所示：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623807595570-ed232a19-4b55-4113-91ac-ae32e1542881.png)
</Frame>

## 3. 高级用法

### 3.1 计算日期差值

我们可以计算在日期区间里所选的两个日期之间的差值，填充到数值组件中。

#### 3.1.1 配置方法

1）在表单/流程表单的表单设计页面，拖动一个日期区间组件和一个数值组件。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639031927715-8464a2c4-95a9-4f00-ae66-ebab42f167e0.png)
</Frame>

2）点击数值组件后，左侧默认值的地方选择公式编辑

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639031997336-8e5505d4-0c4d-43c3-9a43-0d1576c73175.png)
</Frame>

3）点击编辑公式 >> 进去选择时间函数 >> 选择 CASCADEDATEINTERVALV2 函数，具体配置请参考下图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032053555-7fea006e-b683-4be6-aac6-3a42762c3dd7.png)
</Frame>

4）效果展示如下：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032099644-12902268-abec-4030-a817-349b7ca33cb8.png)
</Frame>

关于该函数的具体用法，可以参考以下文档：

此处为语雀内容卡片，点击链接查看：[时间函数](/zh/yida/form/dh7m8n)

### 3.2 禁用日期函数

通过自定义函数，可以设置日期区间的可选范围（与日期组件的自定义设置类似），适用于预约等场景。

**路径**：属性 >> 禁用日期函数 >> 绑定动作

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032144368-d00fa012-b10c-403c-bae9-db36b3e0cb9f.png)
</Frame>

#### 3.2.1 禁用日期函数的配置方法及示例场景

如果想设置 2021-04-16 到 2021-04-30 之间的日期不可选中，可参考如下设置：

点击绑定动作 >> 选择页面 JS >> 点击添加新动作 >> 点击确定

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032210288-8607461d-3bc7-49d6-b6d9-ddc15edff16a.png)
</Frame>

点击确定后，会出现以下界面，参考以下路径：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032270100-10f3a9b7-ceee-492f-ac06-b9920f367089.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618469941192-710fe0e6-b097-40e3-b2d1-25f8f0e97046.png)
</Frame>

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

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function disabledDate(current) {
  // 判断日期在 2021-02-11 和 2021-02-17 之间
  if (current >= new Date('2021-02-11 00:00:00') && current < new Date('2021-02-18 00:00:00')) {
    // 返回 true 表示禁用
    return true;
  }
  return false;
}
```

代码复制截图的一段即可：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470532426-38439bbc-debb-4c16-bfdf-0d24e0430474.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470212868-6eea39c4-ac46-48c4-bb26-adcbc0e7e5a6.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470352009-f4018fdd-fcfb-438b-940f-98294626f520.png)
</Frame>

配置好了后，点击保存，那么 4 月16\~4月30 之间的日期就不可选中了，效果展示如下：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470574247-d2aca493-651f-464f-bb59-90f689350588.png)
</Frame>

## 4. 常见问题

### 4.1 为什么修改日期时，时间被重置了？

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

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639108221344-be60176e-7d96-4329-9e85-797857b5c2b6.png)
</Frame>

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

该功能与日期组件的显示格式常见问题一致，详情请参考链接 [**日期组件**](/zh/yida/form/alex84)，点击日期格式常见问题即可查看。
