Comment créer des formats supplémentaires pour le champ Date

Souhaitez-vous personnaliser l'affichage des dates dans vos formulaires ? Bien que WPForms propose trois formats de date par défaut dans le sélecteur de date du champ Date / Heure, vous pouvez facilement en ajouter d'autres pour répondre à vos besoins.

Ce guide vous montrera comment créer des formats de date personnalisés à l'aide de PHP.

Par défaut, le sélecteur de date du champ Date / Heure propose trois formats de date différents au choix.

Configuration des formats de date personnalisés

Pour ajouter de nouveaux formats de date, vous devrez ajouter un extrait de code à votre site. Si vous n'êtes pas sûr de la manière d'ajouter du code personnalisé, veuillez consulter notre guide sur la manière d'ajouter des 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 permettra d'entrer la date complète dans un format plus long : Lundi 20 décembre 2021. Pour trouver d'autres formats comme celui-ci, consultez la documentation officielle des formats PHP.

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 );

Ajout de 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. Cela inclura un champ de formulaire 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 choisir votre nouveau format.

Et c'est tout ce dont vous avez besoin pour créer des formats de date supplémentaires pour le sélecteur de date de votre champ Date. Souhaitez-vous également personnaliser le sélecteur d'heure ? Veuillez consulter notre tutoriel sur la façon de personnaliser le sélecteur d'heure du champ Date et heure.

Filtre de référence

Référence du filtre : wpforms_datetime_date_formats