<html lang="fr-fr" dir="ltr"><head></head><body>### [Comment personnaliser les options de date du champ Date Heure](https://wpforms.com/developers/customize-the-date-time-field-date-options/)

**Publié le :** 26 février 2021
**Auteur :** Umair Majeed

**Extrait :** Ce tutoriel vous donnera plusieurs exemples sur la façon de personnaliser les champs de formulaire Sélecteur de date et Liste déroulante de date. 

**Contenu :**

Souhaitez-vous personnaliser les options de date du champ Date Heure dans WPForms ? Le champ **Date / Heure** comprend deux options de format pour le sélecteur de date : **Sélecteur de date**, qui fournit à l'utilisateur un calendrier, ou **Liste déroulante de date**.

Avec la sortie de la version 1.6.3, WPForms vous offre des options dans le constructeur de formulaires pour **Limiter les jours** et même **Désactiver les dates passées** ainsi que **Limiter les heures**. Si tout ce dont vous avez besoin est cela, [veuillez consulter cette documentation](https://wpforms.com/docs/how-to-limit-options-for-the-date-time-field/ "Comment limiter les options pour le champ Date / Heure").

Ce tutoriel se concentrera davantage sur la personnalisation du champ **Liste déroulante de date** et sur le calcul des blocs de dates pour le **Sélecteur de date**.

Il est important de se rappeler que si vous utilisez **l'un quelconque** des extraits de code de cette documentation, les options du constructeur de formulaires pour la limitation doivent être désactivées. Pour en savoir plus sur les options intégrées pour limiter les dates, [veuillez consulter cette documentation](https://wpforms.com/docs/how-to-limit-options-for-the-date-time-field/#limit-date).

## Création du formulaire

Avant d'ajouter des extraits, vous devrez créer votre formulaire et ajouter vos champs. Comme ce tutoriel est basé sur le champ **Liste déroulante de date**, vous devrez ajouter au moins un champ **Date**.

Si vous avez besoin d'aide pour créer votre formulaire, [veuillez consulter ce tutoriel](https://wpforms.com/docs/creating-first-form/ "Comment personnaliser les options de date du champ Date Heure").

Une fois que vous avez ajouté vos champs de date, assurez-vous d'avoir sélectionné le **Type** sur **Liste déroulante de date**. Vous pouvez définir le **Type de date** en cliquant sur les options **Avancées** du champ du formulaire.

![Sélectionnez le format du champ de date sur Liste déroulante de date](https://wpforms.com/wp-content/uploads/2021/02/wpforms-set-date-dropdown.jpg)## Personnalisation du champ Date

Pour personnaliser le champ **Date**, vous devrez ajouter l'un des extraits de code ci-dessous à votre site.

Si vous avez besoin d'aide pour apprendre à ajouter des extraits de code à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").

Certains des extraits de code ci-dessous nécessiteront l'utilisation d'informations spécifiques sur [l'ID du formulaire et l'ID du champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Comment localiser l'ID du formulaire et l'ID du champ").

## Utilisation d'extraits sur la liste déroulante de date

#### Limiter le nombre de jours dans la liste déroulante pour correspondre au mois

Pour que le champ **Jours** corresponde au nombre de jours disponibles pour le mois sélectionné, vous utiliseriez cet extrait.

```

/**
 * Limite la liste déroulante des jours pour correspondre au nombre de jours disponibles pour le mois sélectionné.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
 */
 
function wpf_dev_days_dropdown_match_month( ) {
?&gt;

**Catégories :** Champs

**Tags :** Champ Date Heure, Javascript, PHP

---</body></html>