Souhaitez-vous personnaliser la façon dont les dates apparaissent dans vos formulaires ? WPForms fournit trois formats de date par défaut dans le sélecteur de date du champ Date / Heure, mais vous pouvez facilement ajouter d'autres formats pour répondre à vos besoins.
Ce guide vous montrera comment créer des formats de date personnalisés en utilisant PHP.
Par défaut, le sélecteur de date du champ Date / Heure propose trois formats de date différents.
Configuration de formats de date personnalisés
Pour ajouter de nouveaux formats de date, vous devez ajouter un extrait de code à votre site. Si vous ne savez pas comment ajouter un code personnalisé, consultez notre guide sur l'ajout d'extraits de code.
/**
* 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 );
Ce format de date nous permet d'entrer la date complète dans un format plus long : Monday, 20th December 2021. Pour trouver d'autres formats comme celui-ci, consultez la documentation officielle de PHP sur les formats.
Utilisation de séparateurs personnalisés
Pour modifier le séparateur de date (par exemple, de / à -), utilisez ce code :
/**
* Change date separator format
*/
function wpf_dev_date_field_formats( $formats ) {
// 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 );
Ajouter des mots aux formats de date
Pour inclure des mots dans votre format de date (comme "Lundi 20 décembre 2021"), utilisez ce code :
/**
* Add words to date format
*/
function wpf_dev_date_field_formats( $formats ) {
// 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 );
Création du formulaire
Ensuite, nous allons créer notre formulaire et ajouter nos champs. Il s'agira d'un champ Date/Heure.
Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.
Une fois que vous avez ajouté votre champ de formulaire Date/Heure, cliquez sur l'onglet Options du champ et sélectionnez Avancé pour sélectionner le Format et choisissez votre nouveau format.
C'est tout ce dont vous avez besoin pour créer des formats de date supplémentaires pour le sélecteur de date du champ Date. Vous souhaitez également personnaliser le sélecteur d'heure? Veuillez consulter notre tutoriel intitulé Comment personnaliser le sélecteur de date et d'heure du champ Date.
Filtre de référence
Référence du filtre : wpforms_datetime_date_formats