> ## 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.

# Date Range

> Learn the use cases of the date range component, its basic features (such as setting the date format and default time), advanced usage (including calculating date differences and disabling specific dates), and answers to frequently asked questions.

## 1. Use Cases

Use this component in scenarios that require selecting two dates, such as leave requests, business trip periods, or service processing times.

<Note>
  For component attributes, usage, and examples, see [**this reference**](/open/yida/components/interface).
</Note>

## 2. Basic Features

### 2.1 Date Format

Set the display format of the date.

**Path**: Component >> Attribute >> Format

When Format is set to Year-Month-Day, the component displays as follows. Other formats work the same way.

### 2.2 Set a Fixed Time (Default Value)

Set a fixed value for the date range. Once a default value is set, the date range component displays the configured default directly. You can still select a different date manually.

**Path**: Attribute >> Default

When setting the default value, the default format is "Year-Month-Day 00:00:00", but the component displays the value according to the configured Format.

The result is shown below.

When Format is set to Year-Month-Day.

The actual displayed date format is as follows.

## 3. Advanced Usage

### 3.1 Calculate Date Differences

Calculate the difference between the two dates selected in the date range, and populate the result into a numerical component.

#### 3.1.1 Configuration Steps

1. On the form design page of a form or workflow form, drag a date range component and a numerical component onto the canvas.

2. Click the numerical component, then select formula editing under Default on the left.

3. Click Edit Formula >> select a time function >> select the CASCADEDATEINTERVALV2 function. See the figure below for detailed configuration.

4. The result is shown below.

For detailed usage of this function, see the following document.

This is a Yuque content card. Click the link to view: [Time functions](/yida/form/dh7m8n)

### 3.2 Disable Date Function

Use a custom function to define the selectable range of the date range, similar to the custom settings of the date component. This is suitable for appointment scenarios.

**Path**: Attribute >> Disable date function >> Bind action

#### 3.2.1 Configuration Steps and Example for the Disable Date Function

To make dates between 2021-04-16 and 2021-04-30 unselectable, refer to the following configuration.

Click Bind action >> Select Page JS >> Click Add new action >> Click Confirm.

After clicking Confirm, the following screen appears. Follow the path below.

Copy the code below directly for reference:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function disabledDate(current) {
  // Check whether the date falls between 2021-02-11 and 2021-02-17
  if (current >= new Date('2021-02-11 00:00:00') && current < new Date('2021-02-18 00:00:00')) {
    // Return true to disable
    return true;
  }
  return false;
}
```

Copy only the highlighted section of the code:

Once configured, click Save. Dates between April 16 and April 30 become unselectable. The result is shown below.

## 4. FAQ

### 4.1 Why Is the Time Reset When I Change the Date?

When Format is set to "Year-Month-Day-Hour-Minute" or "Year-Month-Day-Hour-Minute-Second", a "Reset time on each date selection" option appears in the attribute panel, as shown below.

This feature is disabled by default. When disabled, changing the date preserves the original "Hour-Minute" value. When enabled, the "Hour-Minute" resets to "00:00" every time the date changes.

This behavior matches the FAQ for the display format of the date component. For details, see [**Date component**](/yida/form/alex84) and view the date format FAQ.