1. Home
  2. Snippets
  3. Customize the Date Time field date options

Customize the Date Time field date options

Heads up!

This article contains PHP and javascript code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

For extra guidance, please see WPBeginner's tutorial on adding custom code.

Dismiss

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.

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.

Date Picker

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 3 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.
 *
 */
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. Below will apply to all date pickers inside form #1269.

/**
 * Limit the dates available in the Date Time date picker.
 *
 */
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 picker inside a specific form. Below will apply to the date picker within field #3 inside form #1269.

/**
 * Limit the dates available in the Date Time date picker.
 *
 */
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

The snippet below will only apply to a form with an ID of 10. Additionally, the respective dropdowns will only display 5-12 (May-December) for months, 20-31 for days, and 2018 for the year. All values can be modified as needed.

/**
 * Limit the dates available in the Date Time field date dropdown.
 *
 */
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( 2018, 2018 ); 

    }

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

Related

Updated on November 30, 2018

Was this article helpful?