Date #
For the date, please select ‘Date’ on the ‘Format’ option from the Field Options.
Date Style #
- Dropdown
You can choose a ‘Dropdown’ option from the ‘Style‘ settings, allowing users to select a date using the dropdown date menu.
You can view the Date Dropdown on preview, as shown below:
2. Picker
You can choose a ‘Picker‘ option from the ‘Style‘ settings, allowing users to pick a date from the calendar.
You can see the Date Picker in the preview below:
Advanced Options #
Also, there are the Advanced Options, where you can change more options for the Date field.
- Placeholder Text: You can enter any placeholder text for the date field.
- Date Format: There are Eight date formats that you can choose from.
- Disable Dates:
Now, you can choose multiple dates when you want to disable them in the form. The users will not be able to select the disabled dates on the front end.
To disable dates, click on the field, and a calendar will appear where you can see the month, year, and dates for the month. Here, simply select the dates that you want to disable.
You can also select the month and year and disable the dates you want to disable.
So, you can see that the disabled dates are not displayed in the frontend of the form and cannot be selected by the users.
- Date Localization: This option allows you to choose the desired date localization to display.
- Timezone: You can select the timezone you are in from the Advanced Options.
At first, the timezone will be the default. You can select your time zone from the available lists.
- Date Mode: There are three choices here. They are Single, Range, and Multiple.
- Single: In Single Date, you can pick any one date individually.
2. Range: You can select the start and end dates for the date range as shown below:
3. Multiple: If you select the Multiple date mode, you can select the multiple dates.
- Default to current date: Check this option to set the current date as default.
- Enable Min Max date: Check this option to set the minimum and maximum dates. This will allow you to select dates within the specified range only.
You can select the multiple Date Pickers for the specified range( minimum and maximum dates) in the preview below:
- Enable Custom Input: Check this option to set custom inputs for the Minimum Date as ‘today‘ and the Maximum Date as ‘+5 days‘.
You can select multiple date pickers within the specified range (e.g., today and +5 days) as shown in the preview below:
Slot Booking
In the Advanced Options, there is a setting called ‘Slot Booking’. This feature allows you to enable a booking form where users can select dates for their booking. Once a date is selected and the form is submitted, no other user will be able to choose the same date.
Time #
For the time, please select ‘Time’ on the ‘Format’ option from the Field Options.
Time Style #
Similarly, you can also choose the style in which the Time field will be shown on the front end from the Style option.
- Time Picker:
- Time Dropdown:
Advanced Options #
Also, there are the Advanced Options, where you can change more options for the Time field as well.
- Placeholder Text: You can add placeholder text to the Date/Time field.
- Time interval and format: You can choose the time format to be either 12 hours or 24 hours, and you can also select the interval to be 15 minutes, 30 minutes, or 1 hour.
Slot Booking
In the Advanced Options, there is a setting called ‘Slot Booking’. This feature enables a booking form where users can select their desired booking time. Once a time is selected and the form is submitted, no other user will be able to choose the same time. If the time is already taken, an error message will appear, and the form will not be submitted.
