Formidable Forms

Formidable Forms

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

Date

Last Updated: May 4, 2022

Knowledge Base → Forms → Form Building → Field Types → Date

— Premium Feature —

The Date field allows users to type in a date or select it from a pop-up calendar. A Date field stores values in the Y-m-d format but the field displays dates in the format selected in your Formidable Global Settings.
Date Field Calendar

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

For more advanced options, see the Datepicker Options add-on.

Standard field options

A Date field has the following standard options:
Date field optionsDate field options

  • Field type
  • Required
  • Unique
  • Read Only
  • Field key
  • CSS layout classes
  • Label position
  • Field size
  • Visibility
  • Before & After Input
  • Conditional logic
  • Lookup value

Field specific options

In addition to the standard field options, a Date field has a few field specific options. Plus, there are more powerful options available in the Datepicker Options add-on.

Calendar localization

Choose which language you would like your calendar to display.
Date Calendar Localization

Year Range

If you would like to set a dynamic year range for a date field calendar, you may insert -50 for the Start Year and +0 for the End Year as shown below:
Date Range
This will set the start date to 50 years ago and the end date to the current year. You may change 50 and 0 to any integer.

Styling

Set the style for your calendar in Formidable → Styles → Date Fields. You may adjust the styling of your head color, text color, and band color.

Date Styles DateDate Calendar

To learn more about styling your form, see the visual form styler page.

Default values and field icons

The default value icons can be used to specify whether the text entered in a Date field on the form builder page should be a default value or a placeholder. Learn how to set a default value and how to set a placeholder in a Date field.

Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See the field action icons article for more information.

Set default to the current date

Autopopulate a Date field with the current date by inserting the [date] shortcode in a field. By default, this will display the current date in the format selected in your Formidable Global Settings. If you would like to display a specific format, use the following shortcode:

[date format="m/d/Y"]

You may replace m/d/y with any of the accepted PHP date() format characters.

Display date fields

Display the value submitted in a Date field in a form's confirmation message, email, or View.

  • Display date

    Display the value submitted in a Date field. By default, the date will be displayed in the format entered in your WordPress → Settings → General page in the 'Date Format' setting.

    [x]

    Replace x with the ID or key of the Date field.

  • Display a specific date format

    Display the value submitted in a Date field with the format of your choosing. You may use any of the PHP date() allowed format characters.

    [x format="m/d/Y"]

    Replace x with the field ID or key of the Date field.

  • Time ago

    Display the number of days, weeks, months, or years ago the entered date is from today's date. This also calculates dates in the future for countdowns.

    [x time_ago=1]

    Replace x with the field ID or key of the Date field.
    See more time_ago options.

  • Offset

    Calculate a date by adding or removing a set amount of time. For example, calculate a pregnancy due date by adding a set number of days to the selected date.

    [x offset="+280 days"]

    Replace x with the field ID or key of the Date field.

    For more flexibility, you can combine time_ago and offset. Our pregnancy due date example shows the number of weeks until the calculated due date with:

    [x offset="+280 days" time_ago=week]

Compare date fields

Use the [date-calc] shortcode to compare date fields. Place the shortcode inside a Default Value (Calculation) in the field options.
Date Calc Quantity Booking form

For example, if the first date selected is the current date and the second date being compared is five days ago, various options will return different results. Here are a few examples:

Shortcode Result
[date_calc id=536 compare=541 format=days]
-5
[date_calc id=536 compare=541 format=days abs=1]
5

Replace 536 and 541 with the ID or key of the date fields to compare.

If you want to compare a date field with a specific date, you may use this shortcode:

[date_calc id=536 compare=2020-01-01 format=days abs=1]

Replace 536 with the ID or key of the Date field and 2020-01-01 with your preferred date.

Create a booking form

If you want to create a booking form where users can select a check-in and check-out date, and calculate the total amount to be paid, follow the instructions below.

  1. Add two date fields to your form: Check-in Date and Check-out Date.
    Date Calc Check-in Check-out Booking form
  2. For the Check-in Date, set [date] as the default value to get the current date.
    TIP: If you have the Datepicker add-on installed, you can set the minimum date to the current date to prevent previous dates from being selected.
  3. Add a product field and name it Room Type. It is the field where the users can choose which room they want to book.
  4. Add your products and their corresponding price. For example:
    • Deluxe Room = $100
    • Suite Room = $300

    Date Calc Room Type Booking form

  5. Add a quantity field and name it Quantity. It is the field where the number of nights per stay will be compared. Set this to Read Only in the field options.
    In the field options, select the calculator icon in the Default Value section. Insert this calculation into the box:
    Date Calc Quantity Booking form

    [date_calc id=536 compare=541 format=days abs=1]

    Replace 536 and 541 with the ID or key of the date fields to compare.

  6. Add a total field and name it Price. It is the field where the total price will be calculated.
    TIP: You can use the built-in frm_total_big CSS layout class to highlight the price.

    Date Calc Total Price Booking form

Calculate an age

See the Field Calculation page for step by step instructions on how to calculate a users age.

Calculate difference in days in a form

To show the difference between two Date fields, you can use a simple numerical Calculation. In the calculations box, put:
[end-date] - [start-date],
where end-date is the id or key of the end Date field and start-date is the id or key of the start Date field.

Show difference in days in a View

Use this shortcode in a View to show the difference in days between two date fields or a date field and the current date. Use the start and finish parameters to indicate the start and finish dates. If you don't include a start or finish parameter, the current date will be used for that parameter. To use [created-at], add a format that only has day, month, and year.

Usage:
[frm-days-diff start="[100]"]: days since the date in field 100
[frm-days-diff start="[100]" finish="[101]"]: days between the dates in fields 100 and 101
[frm-days-diff start="[created-at format='d-m-Y']"]: days since the entry was created

add_shortcode( 'frm-days-diff', 'frm_days_diff' );
function frm_days_diff( $atts ){
	extract( $atts );

	$startdate = isset( $start ) ? new DateTime( $start ) : new DateTime();
	$finishdate = isset( $finish ) ? new DateTime( $finish ) : new DateTime();
	
        $interval = $startdate->diff( $finishdate );

	//Uncomment statement below to show + or - before number of days
	//return $interval->format( '%R%a days' );
   
	return $interval->format( '%a days' );
}

Prevent typing into date fields

Follow these instructions if you want to force your users to select dates using the datepicker and not by manually typing in the date.

Vary schedule for each day

Using a date field and time fields is useful to have separate schedules for different days of the week. One of the most common scenarios is when availability is reduced on Fridays and Saturdays. The directions below can be adapted to apply to this use case.

  1. Add a Date field in your form.
  2. Add a Hidden field. Set the numeric calculation to get the day of the week of the selected date. With Sunday as 0 and Saturday as 6.
    Date Field Schedule Hidden Field
    In the default value (calculation), insert this calculation:

    new Date([320]*24*60*60*1000).getDay()

    Replace 320 with the id or key of your Date field.

  3. Add a Time field for your regular (Sunday - Thursday) time selections and set the conditional logic to show the regular time field when the Hidden field is less than 5.
    Date Field Schedule Conditional Logic Less
  4. Add another time field for your Special (Friday and Saturday) time selections and set the conditional logic to show this time field when the Hidden field is greater than or equal to 5.
    Date Field Schedule Conditional Logic Greater
  5. When the user selects a date in the Date field, it will show the corresponding time field depending on the day of the week selected. Date Field Schedule Time

Troubleshooting

Datepicker not working

If your calendar does not pop up, then you may be missing the wp_footer hook in your theme. It is also possible that you have a JavaScript error on your page. Please review this FAQ to find and fix the problem. If you are unable to find the problem, please create a ticket in our help desk.

Often, if the datepicker calendar is not appearing, the problem can be solved simply by clearing any caches on your site and in your browser.

Missing month and year field text

If you're not seeing any text on the datepicker month and year fields, your theme might be introducing this conflict. To override this, you can use the custom CSS below to change it to a darker color which will make it more visible.

.ui-datepicker .ui-datepicker-title select {
   color: #333 !important;
}

Related customizations

Set datepicker width

This example will allow you to adjust the width of the datepicker field in a form. You can add this to your Formidable > Styles > Custom CSS.

.ui-datepicker{
max-width:20em !important;
}

Related developer hooks

  • Add blackout days, custom date ranges, calendar icons, etc with the frm_date_field_js hook.
  • Require a minimum age for form submission with the frm_validate_field_entry hook.
  • Save the date in a different format with the frm_validate_field_entry hook.
  • Calculate a final date with the frm_validate_field_entry hook.
  • Change the date format for entries exported as a CSV file with the frm_csv_date_format hook.
  • Black out days of the week so that the user cannot select the day with the frm_selectable_dates hook.
  • Standard field options
  • Field specific options
    • Calendar localization
    • Year Range
  • Styling
  • Default values and field icons
    • Set default to the current date
  • Display date fields
    • Display date
    • Display a specific date format
    • Time ago
    • Offset
  • Compare date fields
  • Create a booking form
  • Calculate an age
  • Calculate difference in days in a form
  • Show difference in days in a View
  • Prevent typing into date fields
  • Vary schedule for each day
  • Troubleshooting
    • Datepicker not working
    • Missing month and year field text
  • Related customizations
    • Set datepicker width
  • Related developer hooks
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

You do not have permission to view this form. Maybe you need to log in?

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 Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • 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