How to Create Additional Formats for the Date Field

Overview

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.

The Date / Time field’s Date Picker provides three different date formats to choose from. To select a date format, go to the form builder to click on the Date / Time field in the form preview area to open up the Field Options panel. In the Advanced Options section, click on the Format field to choose a date format.

add additional formats for the date field date picker

Examples

Adding additional date formats can be made available using a filter.

In the snippet below, we’ll be adding a new format “Tuesday, 14th May 2019“.

Simply add this code to your site.

/**
 * Add additional formats for the Date field Date Picker.
 *
 * @link   https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-field/
 *
 * @param  array $formats
 * @return array
 */
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 Tuesday, 14th May 2019
	$formats['l, J F Y'] = 'l, jS F Y';

	return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats' );

Please note that the PHP and JS date characters may be different, so refer to the links in the comments.

Lastly, 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 for PHP to create the UNIX timestamp correctly. In most cases, this is not an issue, but still worth noting.

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