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:
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.
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)
Date Ranges
The Date/Time component can also be user to input a date range using the flatpickr options. These options allow to to configure almost any part of the date picker that you could imagine!
To enable date range simply set the flatpickr options under the data tab with the settings below:
{
"mode": "range"
}
