How to Create Additional Formats for the Date Field

Introduction

Would you like to create additional formats for the Date field Date Picker? If you’d like to show additional date formats, you can do this easily by just adding a PHP snippet. We’ll show you how you can add additional formats for your Date field with PHP.

By default, the Date / Time field’s Date Picker provides three different date formats to choose from.

the default datepicker formats will show 3 different formats to choose from

Adding the snippet

To begin, we’re going to add this snippet to our site. If you need help with how to add snippets to your site, please check out this tutorial.

/**
 * Add additional formats for the Date field Date Picker.
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-field/
 */

function wpf_dev_date_field_formats( $formats ) {

	// Item key is JS date character - see https://flatpickr.js.org/formatting/
	// Item value is in PHP format - see http://php.net/manual/en/function.date.php

	// Adds new format Monday, 20th December 2021
	$formats[ 'l, J F Y' ] = 'l, jS F Y';

	return $formats;
}

add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );

This date format will allow us to enter the full date in a longer format Monday, 20th December 2021. To find more formats such as this, please see all the functions available with the date format.

All dates are also converted and stored in a UNIX timestamp (in addition to the readable format). Depending on the date format, it could affect the ability of PHP to create the UNIX timestamp correctly. In most cases, this is not an issue, but still worth noting.

Creating the form

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

If you need any assistance in creating a form, please see this documentation.

Once you’ve added your Date / Time form field, click on the Field Options tab and select Advanced to select the Format and select your new format.

after adding this snippet you can now choose additional formats for your datepicker

And that’s all you need to create additional date formats for your Date field Date Picker. Would you like to customize the Time Picker as well? Please review our tutorial on How to Customize the Date Time Field Time Picker.

Filter Reference: wpforms_datetime_date_formats

FAQ

Q: How can I change the separator?

A: If you would like to change the date from a / to , use this snippet.

/**
 * Add additional formats for the Date field Date Picker.
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-field/
 */

function wpf_dev_date_field_formats( $formats ) {
 
 // Item key is JS date character - see https://flatpickr.js.org/formatting/
 // Item value is in PHP format - see http://php.net/manual/en/function.date.php
 
 // Adds new format 24-07-2021
 $formats[ 'j-m-y' ] = 'j-m-y';
 
 return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );

Any change for the date format will also affect how the entry is stored and exported.