Skip to main content

​
1. Use Cases

Use this component in scenarios that require selecting two dates, such as leave requests, business trip periods, or service processing times.
For component attributes, usage, and examples, see this reference.

​
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

​
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:
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 and view the date format FAQ.