How to Customize the Date Time Field Date Options

Overview

Would you like to customize the date time field date options in WPForms? The Date / Time field includes two format options for the date selector: Date Picker, which provides the user with a calendar, or Date Dropdown. For either format, the dates available can be customized using PHP. This tutorail will show you the PHP snippet(s) needed to customize the Date / Time field options.

Setup

Before we get started, you’ll need to set up the type of date selector you’d like.

To do this, open the form builder and click on the Date / Time field in the preview area to open its Field Options. From here, open Advanced Options and select the desired option from the Type dropdown.

Select dropdown format for date field

In the sections below, we’ll discuss the code needed to limit dates for the Date Picker and Date Dropdown options.

Some of the code snippets below will require the use of specific form ID and field ID information.

Just copy the code snippet to your site for the option you want to customize.

Date Picker Examples

The snippet below will update the date picker so that users cannot pick dates in the past and cannot pick Sundays. This can be helpful if you only want to show users days, in the future, during when your business is open from which they can schedule an appointment

The date picker can be customized even further using the options available in the Flatpicker date picker library.

There are three different ways this can be applied:

  • All date pickers site-wide
  • All date pickers inside a specific form
  • A specific date time picker inside a specific form

All date pickers site-wide

Below will apply to all date pickers on the site.

/**
 * Limit the dates available in the Date Time date picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 *
 */
function wpf_dev_limit_date_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_datepicker = {
			disableMobile: true,
			// Don't allow users to pick past dates
			minDate: new Date(),
			// Don't allow users to pick Sundays
			enable: [
				function(dateObj){
					return dateObj.getDay() !== 0;
				}
			]
		}
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_date_picker' );

All date pickers inside a specific form

All date pickers inside a specific form. Below will apply to all date pickers inside form ID 1269.

/**
 * Limit the dates available in the Date Time date picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 *
 */
function wpf_dev_limit_date_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_1269 = window.wpforms_1269 || {};
		window.wpforms_1269.datepicker = {
			disableMobile: true,
			// Don't allow users to pick past dates
			minDate: new Date(),
			// Don't allow users to pick Sundays
			enable: [
				function(dateObj){
					return dateObj.getDay() !== 0;
				}
			]
		}
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_date_picker' );

A specific date time picker inside a specific form

Below will apply to the date picker within field ID 3 inside form ID 1269.

/**
 * Limit the dates available in the Date Time date picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 *
 */
function wpf_dev_limit_date_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_1269_3 = window.wpforms_1269_3 || {};
		window.wpforms_1269_3.datepicker = {
			disableMobile: true,
			// Don't allow users to pick past dates
			minDate: new Date(),
			// Don't allow users to pick Sundays
			enable: [
				function(dateObj){
					return dateObj.getDay() !== 0;
				}
			]
		}
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_date_picker' );

Date Dropdown Examples

The snippets below will update the dropdown fields to only display 5-12 (May-December) for months, 20-31 for days, and 2019-2020 for the year. You can modify the fields as needed.

There are two different ways this can be applied:

  • All date dropdown fields inside a specific form
  • A specific date dropdown inside a specific form.

All date dropdown fields inside a specific form

The snippet below will only apply to form ID 10.

/**
 * Filters labels and options within the date field’s dropdown format.

 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 * 
 * @param  array  $args     Months, Days and Years arguments.
 * @param  array  $form_id  Form ID.
 * @param  array  $field    Date field values and properties.
 * @return array
 */
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {

    $form_id = (int) $form_id;

    // Only apply if the form's ID is 10
    if ( $form_id === 10 ) {

        // Set the lower and upper limits for each date dropdown
        $args['months'] = range( 5, 12 ); 
        $args['days'] = range( 20, 31 ); 
        $args['years'] = range( 2019, 2020 ); 

    }

    return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );

A specific date dropdown inside a specific form

Below will apply to the date dropdown with field ID 3 inside form ID 10.

/**
 * Filters labels and options within the date field’s dropdown format.

 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 * 
 * @param  array  $args     Months, Days and Years arguments.
 * @param  array  $form_id  Form ID.
 * @param  array  $field    Date field values and properties.
 * @return array
 */
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {

    $form_id = (int) $form_id;
	
    // Only apply if the form's ID is 10 and field ID 3
    if ( $form_id === 10 &amp; $field['id'] == 3) {

        // Set the lower and upper limits for each date dropdown
        $args['months'] = range( 5, 12 ); 
        $args['days'] = range( 20, 31 ); 
        $args['years'] = range( 2019, 2020 ); 

    }

    return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );

And that’s all you need to achieve this! Would you like to customize the date picker in other ways? Try out our tutorial on How to Allow Date Range or Multiple Dates in Date Picker.

Filter reference: wpforms_datetime_date_dropdowns

Action Reference: wpforms_wp_footer