Introduction
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.
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 https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-time-field-time-picker/
*/
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 PHP.net 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.
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.
Related
Filter Reference: wpforms_datetime_time_formats
FAQ
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 https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-time-field-time-picker/
*/
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 );