The date/time component can be configured to automatically set its value from an expression. This article will run though some common examples to help you get started.
Example 1 - Default to todays date
Is often useful to default the Date/Time component to todays date. This can easily be done by following the steps below:
Navigate to the data tab in the component settings
Under "Default Date" insert the expression
moment()
You could also optionally disable the date/time field to prevent users from changing the value. To do so simply open the settings for the date/time component and tick the disabled option under the display tab.
Example 2 - Automatically set one date/time field based on another
You can automatically set one date/time component based on the response to another date time component using the approach outlined below:
Open the setting for the first date/time component and navigate to the logic tab
Expand the On Change settings. This setting allows you run your own JavaScript code any time the selected date changes. In this example we will update the response to a second date field based on the selected date.
// Step 1. Get the current value of the date/time component
const selectedDate = instance.getValue()
// Step 2. Calculate the desired date/time
const calculatedDate = moment(selectedDate).add(1, 'day').format('YYYY-MM-DD')
// Step 3. Set another date/time component to the calculated date
instance.root.getComponent("calculatedDate1").setValue(calculatedDate)
🚧 You will need to replace calculatedDate1 in the code above to match the property name of your secondary date field. You can get the right value opening the setting for the second date/time field and noting the property name that appears in the api tab.