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

Customize the Date Time field time 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 time picker provides the user a list of times to choose from. These times can be changes so that only a specific time range is available.

The snippet below will update the time picker so that users can only pick times between 8am to 5pm. This can be helpful if you only want to show users times during when your business is open.

The time picker can be customized even further using the options available in the jQuery timepicker library.

There are 3 different ways this can be applied:

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

All time pickers site-wide. Below will apply to all time pickers on the site.

/**
 * Limit the times available in the Date Time field time picker.
 *
 */
function wpf_dev_limit_time_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_timepicker = {
			scrollDefault: 'now',
			forceRoundTime: true,
			// Limit times available to 8am - 5pm
			minTime: '8:00am',
			maxTime: '5:00pm'
		};
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker' );

All time pickers inside a specific form. Below will apply to all time pickers inside form #1269.

/**
 * Limit the times available in the Date Time field time picker.
 *
 */
function wpf_dev_limit_time_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_1269 = window.wpforms_1269 || {};
		window.wpforms_1269.timepicker = {
			scrollDefault: 'now',
			forceRoundTime: true,
			// Limit times available to 8am - 5pm
			minTime: '8:00am',
			maxTime: '5:00pm'
		};
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker' );

A specific time picker inside a specific form. Below will apply to the time picker within field #3 inside form #1269.

/**
 * Limit the times available in the Date Time field time picker.
 *
 */
function wpf_dev_limit_time_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_1269_3 = window.wpforms_1269_3 || {};
		window.wpforms_1269_3.timepicker = {
			scrollDefault: 'now',
			forceRoundTime: true,
			// Limit times available to 8am - 5pm
			minTime: '8:00am',
			maxTime: '5:00pm'
		};
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker' );
Updated on November 20, 2017

Was this article helpful?