- Passer au contenu principal
- Passer à « À propos de ce site »

# Correctif « input type="date" » (sélecteur de date)

Questions ou commentaires?

## Objet

Fournir une interface pour sélectionner une date dans un formulaire. Met en œuvre le modèle de conception « Date Picker » de WAI-ARIA (anglais seulement).

## Utilisation

Cette fonctionnalité peut être utilisée sur n'importe quelle page où sélectionner une date dans un formulaire est requis.

## Exemple pratique

- Exemple en anglais
- Exemple en français

## Mise en œuvre

1. Ajouter un champ de saisie de texte pour chaque date qui sera demandée. Chaque champ de saisie de texte doit implémenter le type `date`.
2. Facultatif : Enrouler le format de date avec `<span class="datepicker-format"></span>` pour le cacher lorsque le correctif ne charge (à cause du soutien natif).
3. Facultatif : Ajouter l'attribut `max` indiquant la date la plus éloignée que peut sélectionner l'utilisateur.
4. Facultatif : Ajouter l'attribut `min` indiquant la date la plus proche que peut sélectionner l'utilisateur.

### Code d'exemple

    <div>
    	<label for="startdate">Date de début<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span> :</label>
    	<input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
    </div>
    <div>
    	<label for="enddate">Date de fin<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span> :</label>
    	<input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
    </div>

## Options de configuration

Option | Description | Configuration | Exemple
--- | --- | --- | ---
Cacher le format de la date | Cacher le format de la date lorsque le correctif ne charge pas (à cause du soutien natif). | Enrouler le format de date avec :
    <span class="datepicker-format"></span>
    <label for="startdate">Date de début<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span>
Date min | La date la plus proche que peut sélectionner l'utilisateur. | Ajouter l'attribut « min » avec une date en format AAAA-MM-JJ pour indiquer la date la plus proche que peut sélectionner l'utilisateur. |
    <input type="date" id="startdate" name="startdate" min="2013-03-27" />
Date max | La date la plus éloignée que peut sélectionner l’utilisateur. | Ajouter l'attribut « max » avec une date en format YYYY-MM-DD pour indiquer la date la plus éloignée que peut sélectionner l'utilisateur. |
    <input type="date" id="startdate" name="startdate" max="2013-05-07" />

## Événements

Événement | Déclencheur | Fonction
--- | --- | ---
`wb-init.wb-date` | Triggered manually (e.g., `$( "input[type=date]" ).trigger( "wb-init.wb-date" );`). | Used to manually initialize the `input type="date"` polyfill. Note: The `input type="date"` polyfill will be initialized automatically unless the `input type="date"` element is added after the page has already loaded.
`wb-ready.wb-date` (v4.0.5+) | Triggered automatically after the `input type="date"` polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native `input type="date"` support. | Used to identify where the `input type="date"` polyfill initialized (target of the event)
    $( document ).on( "wb-ready.wb-date", "input[type=date]", function( event ) {
    });
    $( "input[type=date]" ).on( "wb-ready.wb-date", function( event ) {
    });
`wb-ready.wb` (v4.0.5+) | Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
    $( document ).on( "wb-ready.wb", function( event ) {
    });

## Code source

Code source pour le orrectif « input type="date" » (sélecteur de date)

Date de modification :
  2014-08-06