All Collections
Examples & Tutorials
Automatically Set a Date Field
Automatically Set a Date Field
Updated over a week ago

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:

  1. Navigate to the data tab in the component settings

  2. 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:

  1. Open the setting for the first date/time component and navigate to the logic tab

  2. 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')

    // Step 3. Set another date/time component to the calculated date

๐Ÿšง 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.

Did this answer your question?