Date/Time Component

Lets explore the date/time component and see how we can configure the date picker.

Updated over a week ago

The Date/Time component is a power feature that allows you to add a date picker to your forms.

Although the component is named Date/Time it can easily be configured for any use case like just dates or even date ranges! This article will show some common examples.

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()

  3. 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.

Date Only Picker

You can configure the Date/Time component to only accept dates by disabling the time feature in the time tab.

Restrict Dates

In many situations it can be useful to restrict the dates available to choose from. For example you may want to enable weekdays or dates within the next two weeks. We can easily restrict the dates using some simple JavaScript in the "Custom Disable Date" option. Below we provide a few common examples

Disabling all weekends

date.getDay() === 0 || date.getDay() === 6

Disable all Mondays

date.getDay() === 1

Disable past days

date <= moment().startOf('day').toDate()

Disable dates within the next 14 days

date < new Date().fp_incr(14)

Did this answer your question?