Formidable Forms

Formidable Forms

  • Features
  • Templates
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Datepicker Options for Forms

Knowledge Base → Add-Ons → Appearance and UI → Datepicker Options for Forms

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

Get Better Forms FREE!
 
Subscribe on YouTube

Datepicker options formDatepicker options form

Learn how to create a WordPress form with a Datepicker calendar

Download and install

To access this add-on, ensure you have the Business license or above.
  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, proceed to the Formidable → Add-Ons page and click the Install button for the Datepicker Options WordPress plugin.
    Datepicker Options Install

Date calculations

Subscribe on YouTube

With date calculation, users can instantly see the calculated results without submitting the form. To calculate the results date after specifying the number of days, weeks, months, or years, follow the steps below.

    Datepicker Options - Date Calculations

  1. Open the field options for the date field in your form.
  2. In the Advanced section, select the calculator icon in 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}, e.g., +[10]years, -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. e.g., +3day or + 3 day are ok.
    • {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.
  5. Note: If the resulting date falls on any of the blackout dates, the next available date will be automatically selected.

Calculate future date

If you need to calculate a future date based on an entered date and a specific number of days, follow the steps below.

  1. Add a date field where you can select a date. If you want to set it to the current date, use the [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.
    Datepicker Options - Calculate Final Date Duration
  4. Add another date field to calculate the future date. In the Advanced section, select the calculator icon in the Default Value box to enable the date calculation.
    Datepicker Options - Final Date Calculation

    • Set the Start date to the ID of the previous date field.
    • Set the Date Difference to +[10][11]. Replace 10 and 11 with the IDs of the number and dropdown/radio button field.
  5. That's it! When a user selects a start date, number, and unit, the results will display the future date.
    Datepicker Options - Calculate Final Date

Set minimum/maximum dates

The Formidable Forms Pro plugin includes the option to set a dynamic year for the start and end year range. But if you would like this range to change when another date field changes, or set a more specific range that starts or ends 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. Check the box to Set specific minimum and maximum dates.
  3. 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, i.e., Book an appointment.
    • Select Current date and insert +0 for the maximum date to not allow future dates to be selected, i.e., Select a birthdate.
    • Select Current date and insert -18 years for the maximum date to only allow someone who is over 18 to submit the form.
    • 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 from the dropdown and insert +2 days in the box.

Using negative numbers for minimum date

If you want to restrict users from choosing a date 90 days prior to the current date, you can use negative numbers for the minimum date.

  1. Open the field settings for the date field in your form.
  2. Set a dynamic year range by inserting -1 for the Start Year and +0 for the End Year. This will set the start date to last year and the end date to the current year.
    Datepicker options Restrict year range
  3. Check the box to Set specific minimum and maximum dates.
    Datepicker options Restrict Minimum Maximum

    • 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

Blackout weekends

  1. Open the field settings for the date field in your form.
  2. Uncheck the All days box for Days of the week.
    Datepicker options without blackout days
  3. Now you will see a list of each day of the week. Uncheck the boxes for any days of the week you do not want to allow.
    Datepicker blackout days
  4. That's it! Here is the result:
    Datepicker with blackout weekends

Add an exception

When a day of the week is disabled, but there is a date you would still like to be selected, you'll need to add an exception. For example, if you blockout Saturdays but there are two Saturdays you would like to allow, add exceptions.

  1. After blacking out a day of the week, the Exceptions link will appear.
  2. Click this link and select the dates that should be selectable in your datepicker.
    Datepicker options with exceptions to blackout days

Add a blackout date

When there are specific dates (like a holiday) that should be excluded, use the Blackout Dates option.

  1. Open the field settings for the date field in your form.
  2. Click the Blackout Dates link and a datepicker will appear.
  3. Select each date that should be blacked out in 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, check the box to Display Inline Date Picker in the field options.
Inline datepicker

Book appointments

If you need more scheduling options, like booking a unique time slot, take a look at the Simply Schedule Appointments plugin. It's an easy and fast way of setting up open times in a schedule to allow a single visitor to select an open slot.

  1. Add an Appointment field to your form.
  2. Select the type of appointments you would like to book.
    Appointment form setup
  3. Then your visitors can select a date and time.
    Schedule appointments in WordPress forms

Related developer hooks

  • Black out dynamic dates with the frm_date_field_options hook.
  • Hide month and year selectors with the frm_date_field_options hook.
  • Add a clickable calendar icon next to to the datepicker with the frm_date_field_options hook.

Related Articles

  • The best time addition calculator The Best Time Addition Calculator for WordPress
    Read More
    How to calculate the day from a date How To Calculate the Day From a Date [Past & Future Dates]
    Read More
    How to calculate the days between dates How To Calculate Days Between Dates [Make a Date Calculator]
    Read More
  • Online date calculator Create an Online Date Calculator the Code-Free Way
    Read More
    Typeform datepicker alternative There’s No Typeform Date Picker. Here's a Better Option!
    Read More
    How to add Age Restrictions How To Add Age Restrictions in WordPress Forms
    Read More
  • how to create an inline form in WordPress How to Create an Inline Form in WordPress
    Read More
    How to add a datepicker to an online form How To Create a WordPress Form with a Datepicker Calendar
    Read More
  • Download and install
  • Date calculations
    • Calculate future date
  • Set minimum/maximum dates
    • Using negative numbers for minimum date
  • Blackout weekends
    • Add an exception
  • Add a blackout date
  • Show inline datepicker
  • Book appointments
  • Related developer hooks
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

Submit doc feedback
Was this article helpful? *
What did you find most unhelpful? *

If you need help from our support team, please create a ticket at our helpdesk.

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Plugin
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directory Plugin
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews