Date

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.

Standard field options

A Date field has the following standard options:

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

Field specific options

In addition to the standard field options, a Date field has a few field specific options.

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.

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

Load CSS locally

Formidable Forms comes packaged with the UI Lightness datepicker styling. If you select a different style, it will be loaded externally from https://ajax.googleapis.com. If you would like to host this styling on your own site you can do so.

1. Go to the jQuery UI themeroller page and click the 'Gallery' tab in the sidebar.
2. Click the 'Download' button next to the style you selected in your Formidable styling settings.
3. This will take you to the 'Download Builder' page. Scroll to the bottom of the page and click the big, black 'Download' button, no changes required.
4. Unzip the downloaded files and rename the folder to the name of the selected theme. For example, if you selected 'Start' for the theme, the folder name should be 'start'. This is case sensitive.
5. Delete everything inside this folder except jquery-ui.css and the 'images' folder.
6. Upload the folder inside of it to wp-content/uploads/formidable/css.

With this folder is in place and named correctly, the stylesheet from your site will be used. If you're not sure what to name the folder, you can find a list in Github to help.

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.

  [x time_ago=1]

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

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 = $start ? new DateTime( $start ) : new DateTime();
	$finishdate = $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' );
}

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;
}

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.

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.