Date

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

For component attributes, usage, and examples, see the interface reference.

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:

Click Bind action. The following screen appears. Follow the steps in the screenshot.
Click Confirm. The following screen appears. Follow the steps in the screenshot.
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 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

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:

3.2 How do I convert the difference between two Date components into hours?

Refer to the following settings:

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.

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.

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.

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.

 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:

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:

export function onChange({ value }) {
  this.$('DateComponentUniqueId').setValue(Date.parse(new Date()))
}

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.

{"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}

Getting Started

Quick Start

Form Management

Workflow Design

Report Design

Aggregate Table Design

Portal Design

Custom Pages

Integration & Automation

Cool App

App Management

Platform Management

Internationalization

YiDA Dedicated

Developer Features

1. Applicable Scenarios

2. Basic Features

2.1 Set a Fixed Time and Date Format

2.1.1 Default Value (Fixed Time)

2.1.2 Date format

2.2 Selectable Time Range

2.2.1 Time Range Scenario Example

2.2.2 Premium Custom Range Configuration and Scenarios

2.3 Clear Button

3. FAQ

3.6 Implementing a Clock with Ticking Seconds

​1. Applicable Scenarios

​2. Basic Features

​2.1 Set a Fixed Time and Date Format

​2.1.1 Default Value (Fixed Time)

2.1.2 Date format

​2.2 Selectable Time Range

​2.2.1 Time Range Scenario Example

​2.2.2 Premium Custom Range Configuration and Scenarios

​2.3 Clear Button

​3. FAQ

​3.6 Implementing a Clock with Ticking Seconds

1. Applicable Scenarios

2. Basic Features

2.1 Set a Fixed Time and Date Format

2.1.1 Default Value (Fixed Time)

2.2 Selectable Time Range

2.2.1 Time Range Scenario Example

2.2.2 Premium Custom Range Configuration and Scenarios

2.3 Clear Button

3. FAQ

3.6 Implementing a Clock with Ticking Seconds