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

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

Mise en œuvre

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.
Facultatif : Enrouler le format de date avec <span class="datepicker-format"></span> pour le cacher lorsque le correctif ne charge (à cause du soutien natif).
Facultatif : Ajouter l'attribut max indiquant la date la plus éloignée que peut sélectionner l'utilisateur.
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.

É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 ) { });`

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)

Signaler un problème sur cette page

Date de modification :: 2014-08-06

Sélection de la langue

Recherche