Date

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
• 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.

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. 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.

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:

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

[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.

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.
   
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

   

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 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.

   

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

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.
   
   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.
   
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.
   
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.

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.