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

Overview

Would you like to create additional time formats for the Date Time Field Time picker? 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.

Setup

By default, there are two options for the Formats dropdown on the Time field.

Default 12 H and 24 H Time Format options

To provide an additional Format to the dropdown, copy this code to your site.


/**
 * 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 ) {

        $formats['H:i:s'] = 'HH:MM:SS';

        return $formats;
    }
);
}

add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats' );

After adding the code you'll see the new option in the Format dropdown

When the new option is selected in the form builder, users will see the new time format while accessing the form.

The new time format is now visible on the 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