How to Customize the Date Time Field Time Picker

Overview

Would you like to customize the Date / Time field for the Time Picker in WPForms? The Time Picker provides the user a list of times to choose from. These times can be changed so that only a specific time range is available. In this tutorial, we’ll show you how to customize the Time Picker using PHP.

Implementation Options

The snippet below will update the time picker so that users can only pick times between 8 am to 5 pm. This can be helpful if you only want to show users times 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.

Choose the code snippet you’d like and add the code to your site.

1) 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.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 *
 */
function wpf_dev_limit_time_picker() {
	?>
	<script type="text/javascript">
		window.wpforms_timepicker = {
			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' );

2) All time pickers inside a specific form

Below will apply to all Time Pickers inside form ID 1269.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-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 = {
			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' );

3) A specific time picker inside a specific form

Below will apply to the Time Picker within field ID 3 inside form ID 1269.

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-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 = {
			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' );

If you need any assistance in identifying the form or field IDs, please review this article.

That’s all you need to customize the Time Picker for the Date / Time field in WPForms. Would you like to create additional formats for your Date Picker? Our tutorial, How to Create Additional Formats for the Date Field will show you how you can use PHP to achieve this.

Action Reference: wpforms_wp_footer