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

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.

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 https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-time-field-time-picker/
 */

function wpf_dev_date_field_formats( $formats ) {

add_filter(
    'wpforms_datetime_time_formats',
    static function( $formats ) {
 
        // This format will return hours, minutes and seconds in a 2 digit format (01:07:05 
        $formats[ 'H:i:s' ] = 'HH:MM:SS';

        return $formats;
    }
);
}

add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 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.

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_date_formats