The Datepicker Options plugin enhances the overall user experience by providing customizable options to date fields in WordPress forms.

Subscribe on YouTube

Download and install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, go to the Formidable → Add-Ons page and toggle on the Datepicker Options WordPress plugin.
   

   

Date calculations

Subscribe on YouTube

With date calculation, users can instantly see the calculated results without submitting the form. To calculate a resulting date after a set number of days, weeks, months, or years:

1. Open the field options for the date field in your form.
2. In the Advanced section, turn on Calculate Value under the Default Value box to enable the date calculation.
3. Set the Start date by adding values that can be filled with these options:
   • With a specific date in the yyyy-mm-dd format: 2023-07-21
   • Using shortcodes: [date], [get param="param_name"]
   • With a field value: [10] (Replace 10 with the field ID). Supported field types are date, text, hidden, radio, and dropdown.
4. Set the Date Difference by adding values in this format: {operator} {number} {unit}, such as +[10]years or -3days.
   • Using shortcodes: [get param="param_name"]
   • Field values: [10] (Replace 10 with the field ID). Supported field types are number, text, hidden, radio, and dropdown.
   • There can be no space, one, or multiple spaces between those parts. For example, +3day or + 3 day are both fine.
   • {operator}: Not a required value. If you don't add any operator value, it will default as +. It accepts + and -.
   • {number}: A required value.
   • {unit}: A required value. It accepts d, day, days, w, week, weeks, m, month, months, y, year, years.

Calculate future date

To calculate a future date from an entered date and a specific number of days:

1. Add a date field where you can select a date. To set it to the current date, use [date] as the default value.
2. Add a number field to determine the duration.
3. Add a dropdown or radio button field to specify the unit. You can set the options as day, month, and year.
   

   

4. Add another date field to calculate the future date, and label it Future Date. In the Advanced section, turn on Calculate Value under the Default Value box to enable the date calculation.
   

   

   • Set the Start date to the ID of the previous date field in square brackets, such as [9]. A plain ID without brackets gives the wrong date.
   • Set the Date Difference to +[10][11]. Replace 10 and 11 with the IDs of the number and dropdown/radio button field.
5. When a user selects a start date, number, and unit, the Future Date field shows the calculated date.
   

   

Set up a Date Range

The Date Range feature lets your users select a start and end date from a single calendar field. It's ideal for event bookings, travel dates, or any other scenario that requires a time frame.

1. Check the date picker library. Date ranges use the Flatpickr date picker library, which is the default in Formidable Forms 7.0 and newer. If you switched your site to jQuery, switch it back to Flatpickr to use date ranges.
   

   

   • Go to Formidable → Global Settings → General Settings.
   • Under the Date Picker Library field, select Flatpickr.
   • Click Update to save your changes.
2. Add the Date Range field. With Flatpickr selected and the Datepicker Options add-on active, you can add a date range to any form. Without the add-on, the Date Range checkbox is greyed out, and clicking it opens an "Activate the Extra Datepicker options" message. See Download and install.
   

   

   • Open the form you want to edit and add a new Date field.
   • In the Field Options for the date field, select the Date Range checkbox (1).
   • When enabled, an End Date field (2) is added automatically next to the existing date field, which becomes the Start Date.
   • Click Update to save your form. On a new form, this button is Save.

Your date field can now accept a range of dates from your users.

The two fields of a range work as a pair. The End Date field takes these settings from the Start Date field: Required, Unique, Read Only, Visibility, and Year Range. Change them in the Start Date field. In the End Date field they're locked, with a note that shared range settings can only be changed in the start date field.

Set minimum/maximum dates

Formidable Forms Premium includes the option to set a dynamic year for the start and end year range. Set minimum and maximum dates to make this range change with another date field. You can also use them to start or end on a specific date rather than at the beginning or end of the year.

1. Open the field settings for the date field in your form.
2. Set the Year Range, below the Date Range checkbox. When Minimum or Maximum is set to Year set above, the calendar starts or ends at this range. A new date field uses -10 and +10 for 10 years before and after the current year. For a birthdate or an age limit, enter -100 in the first box and +0 in the second box.
3. Expand the Advanced section and check the box to Set specific minimum and maximum dates. A Minimum and a Maximum dropdown appear. When you select Current Date or a field in one of them, a box appears next to it for the offset. After you save the form with a minimum or maximum date, this checkbox is hidden. When you reopen the field, Minimum and Maximum show directly.
4. The minimum and maximum dates can be set in a number of ways.
   • Select Current Date and insert +0 for the minimum date to not allow past dates to be selected, such as when booking an appointment.
   • Select Current Date and insert +0 for the maximum date to not allow future dates to be selected, such as for a birthdate. With the default Year Range, only dates from the last 10 years can be picked. Set the range to -100 and +0 in step 2.
   • Select Current Date and insert -18 years for the maximum date to only allow someone who is over 18 to submit the form. Set the Year Range to -100 and +0 in step 2 first. With the default -10 and +10, the calendar has no dates to pick.
     

     

   • When using two date fields, set the second field to start 2 days after the date selected in the first field. In the second field, select the name of the first date field in the Minimum dropdown and insert +2 days in the box next to it. The dropdown lists date fields by their saved labels. Click Update first if you just added or renamed the first field.
5. Click Update to save your form.

Using negative numbers for minimum date

To stop users from choosing a date more than 90 days before the current date, use a negative number for the minimum date.

1. Open the field settings for the date field in your form.
2. Set a dynamic year range. Under Year Range, enter -1 in the first box and +0 in the second box. This sets the start date to last year and the end date to the current year.
   

   

3. Expand the Advanced section and check the box to Set specific minimum and maximum dates.
   

   

   • Set the minimum date by selecting Current Date and insert -90 days to not allow dates 90 days prior to the current date to be selected.
   • Set the maximum date by selecting Current Date to not allow future dates to be selected.
4. Click Update to save your form.

Blackout weekends

1. Open the field settings for the date field in your form and expand the Advanced section.
2. Uncheck the All Days box for Days of the week.
   

   

3. A list of each day of the week appears. Uncheck the boxes for any days of the week you do not want to allow. Then click Update to save your form.
   

   

4. Here is the result:
   

   

Add an exception

When a day of the week is disabled, but there is a date you still want to be selectable, you'll need to add an exception. For example, if you block out Saturdays but there are two Saturdays you want to allow, add exceptions.

1. After you uncheck a day of the week, click Update. Then click the date field in the form to reopen its field options, and expand the Advanced section. The Exceptions box now appears below Days of the week.
2. Click Add Exceptions and select the dates to make selectable in your datepicker. Click a blank spot in the field options to close the calendar. Then click Update.
   

   

Add a blackout date

To exclude specific dates, such as a holiday, use the Blackout Dates option.

1. Open the field settings for the date field in your form and expand the Advanced section.
2. Check the Blackout Dates box. An Add dates box appears.
3. Click Add dates and select each date to black out in your form. Click a blank spot in the field options to close the calendar. Then click Update to save your form.
   

   

Show inline datepicker

When the datepicker is set to show inline, it will appear on the form instead of a text field to click. To show the datepicker directly in the form, open the field options for the date field and expand the Advanced section. Then check the box to Display Inline Date Picker and click Update.

Book appointments

For more scheduling options, like booking a unique time slot, take a look at the Simply Schedule Appointments plugin. It sets up open times in a schedule so a single visitor can select an open slot.

1. Install and activate the Simply Schedule Appointments plugin. Until then, the Appointment field is greyed out in Add Fields, and clicking it opens a message about the integration.
2. Add an Appointment field to your form.
3. Select the type of appointments you want to book.
   

   

4. Then your visitors select an open date. After they pick a date, they choose a time.
   

   

Related developer hooks

• Blackout dynamic dates with the frm_date_field_options hook.
• Hide month and year selectors with the frm_date_field_options hook.
• Set the first day of the week for all forms with the frm_date_field_options hook.
• Set a specific field's first day of the week with the frm_date_field_options hook.