How to Create Additional Formats for the Date Time Field Time Picker


Would you like to create additional formats for the time when using the Date / Time form field? If you would like to see and use more formats than what the form builder provides, you can easily create more using a simple code snippet. We can show you how to use a PHP filter to create additional formats.

By default, WPForms provides two formats for the Time field. a 12 H and a 24 H.

by default, you have a 12 hour and a 24 hour time format for your time field

For this tutorial, we’re going to add a new format for the time.

Adding the snippet

First, we’re going to add this snippet to our site. If you need help with how to add snippets to your site, please see this tutorial.

 * Add additional formats for the Time field Format dropdown.
 * @link

function  wpf_dev_date_field_time_formats1 ( $time_formats ) {

        // Displays 2-digit hour, 2-digit minute, and 2-digit seconds
	$time_formats[ 'H:i:s' ] = 'HH:MM:SS';

	return $time_formats;
add_filter( 'wpforms_datetime_time_formats', 'wpf_dev_date_field_time_formats1', 10, 1 );

This time format will allow us to enter a longer format for 2-digit hours, 2-digit minutes, and 2-digit seconds. To find more formats such as this, please see all the functions available from the official site.

Creating the form

Next, we’re going to create our form, add our fields, and this will include one Date / Time form field.

If you need any help with creating a form, please see this documentation.

When you’ve added the Date / Time form field, click on the Field Options tab and select Advanced. Under the Time section, you’ll now be able to select the new time format you just added with the snippet.

adding this snippet means that now you can create additional formats for the time field

Would you like to limit the times available inside this dropdown? Take a look at our article on How to Customize the Date Time Field Time Picker.

Filter Reference: wpforms_datetime_time_formats


Q: How can I display the time in the French format?

A: Simply copy this snippet to your site for the French time format.

 * Add additional formats for the Time field Format dropdown using French time format.
 * @link

function  wpf_dev_date_field_time_formats_french( $time_formats ) {

	$time_formats[ 'G\\\hi\\\m' ] = 'French Format';

	return $time_formats;
add_filter( 'wpforms_datetime_time_formats', 'wpf_dev_date_field_time_formats_french', 10, 1 );