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

> Learn the basics of the Date component, its feature settings (default value, date format, time range, and more), and common FAQs. Use it whenever users need to select a date or time.

## 1. Applicable Scenarios

Use the Date component whenever users need to select a date or time, such as overtime records or business trips. The Date component always uses local time.

[Component basic information](/yida/form/snftao)

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

## 2. Basic Features

You can configure the default date value, date format, one-click clearing, date range, and premium custom range.

### 2.1 Set a Fixed Time and Date Format

#### 2.1.1 Default Value (Fixed Time)

The Date component supports default values. Once set, the default value appears when the form is opened. You can still select another date manually.

**Path**: Component >> Attribute >> Default

**Note**: The default value is stored as "YYYY-MM-DD", but the value displayed in the component follows the format you configure.

Example:

Date default value

##### 2.1.2 Date format

The default date format is "YYYY-MM-DD". You can also customize the date format.

Example:

Date format

### 2.2 Selectable Time Range

You can limit the selectable time range, which is useful for scenarios such as leave requests and overtime.

Example:

Selectable time range

#### 2.2.1 Time Range Scenario Example

To restrict users to requesting leave only from today onward, set the time range to "Selectable from today onward (including today)". Dates before today then appear in gray and cannot be selected. Other ranges work in the same way.

Example:

#### 2.2.2 Premium Custom Range Configuration and Scenarios

Use JavaScript to restrict users to selecting only a specified time range. This suits scenarios such as appointment booking and special business processing.

**Path**: Attribute >> Selectable time range >> Select Custom >> Bind action

Bind action

Bind a custom action to define the allowed time range. The following example action allows selecting a date only within the next 7 days.

Configuration steps:

1. Click Bind action. The following screen appears. Follow the steps in the screenshot.

2. Click Confirm. The following screen appears. Follow the steps in the screenshot.

3. Delete the existing code, enter the JavaScript code, and click Save. Follow the steps in the screenshot. For sample code, see:

Developer Center: [https://docs.aliwork.com/docs/developer/components/form/dateField](/open/yida/components/form/dateField)

After configuration, only dates within seven days can be selected. Example:

### 2.3 Clear Button

After you enable the clear button, click × to clear an incorrect time in one step. Example:

## 3. FAQ

<AccordionGroup>
  <Accordion id="q1" title="3.1 Why is the time reset after I change the date?">
    When you select the "YYYY-MM-DD HH:mm" or "YYYY-MM-DD HH:mm:ss" format, the "Reset time on each date selection" option appears in the attribute panel. Example:

    This feature is disabled by default, so the "hour-minute" values remain unchanged when you modify the date. If you enable this option, the "hour-minute" values reset to "00:00" every time you change the date.

    Example:
  </Accordion>

  <Accordion id="q2" title="3.2 How do I convert the difference between two Date components into hours?">
    Refer to the following settings:
  </Accordion>

  <Accordion id="q3" title="3.3 When a day of the week is entered in a Single-line text field, how do I make the Date component below display the date of that day in the current week?">
    This cannot be achieved with zero code for now. Use a formula to obtain the current date, then use JavaScript to compare the target weekday with the current date, calculate the difference in days, and determine the actual date of the target weekday.
  </Accordion>

  <Accordion id="q4" title="3.4 I added a date range component to a form. The first field is set to 4 PM on the 12th, and I want the second field to allow times after 4 PM on the 12th. However, the second field can only start from the 13th. It currently supports only day-level precision. Can it support hour-level precision?">
    The date range component currently supports only day-level precision. Please submit a feature request.
  </Accordion>

  <Accordion id="q5" title="3.5 How do I calculate the number of days, hours, and minutes between two dates?">
    This can be calculated using a formula that computes the difference between the two date/time values.
  </Accordion>
</AccordionGroup>

### 3.6 Implementing a Clock with Ticking Seconds

You can use JavaScript to build this. Add a Date component to the form, then copy the following code into the `didMount()` method so that it loads by default.

Note: The unique identifier below must match the unique identifier of the Date component.

```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("Current time: " + y + "-"+M+"-"+d +" "+ h + ":" + m + ":" + s);
 document.getElementById( "uniqueIdentifier").innerHTML = "Current time: " + y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s
 }, 1000);
```

JS panel

Final result:

<AccordionGroup>
  <Accordion id="q6" title="3.7 How do I update the Date component value to the current time in real time when a field value changes?">
    Create a new action on the field whose value changes >> On value change.

    Copy the following code:

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onChange({ value }) {
      this.$('DateComponentUniqueId').setValue(Date.parse(new Date()))
    }
    ```
  </Accordion>

  <Accordion id="q7" title="3.8 How do I calculate fractional days (for example, 0.x days)?">
    Normally, the number of days between two dates is an integer. However, when the start time and end time fall on the same day, the result is 0 days. To convert this into a fractional value such as 0.x days, copy the following code and replace the components with the Date components in your form.

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    {"text":"DAYS(DATE(StartTime),DATE(EndTime))+TIME(HOUR(DATE(EndTime)),MINUTE(DATE(EndTime)),SECOND(DATE(EndTime)))-TIME(HOUR(DATE(StartTime)),MINUTE(DATE(StartTime)),SECOND(DATE(StartTime)))","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}
    ```
  </Accordion>
</AccordionGroup>