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.
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.
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.
Related
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.
Q: Can I place a word in the middle of this format?
A: To produce a date format such as Monday, 20th of December 2021, you’d need to escape the word with a backslash (/). You would 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 Monday, 20th of December 2021
$formats[ 'l, J \of F Y' ] = 'l, jS \of F Y';
return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );