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

Customize the Date Time field date picker

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.

Dismiss

The Date Time field date picker provides the user a calendar of dates to choose from. The dates available can be customized.

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' );
Updated on November 20, 2017

Was this article helpful?