Ajoutez un sélecteur de date à un champ de saisie à l’aide de jQuery UI

Les sélecteurs de date aident les utilisateurs à sélectionner une date via un calendrier. Cela évite les erreurs presque toujours causées par une mauvaise entrée de date, comme un mauvais formatage. En utilisant le plugin jQuery, vous pouvez facilement ajouter un sélecteur de date à un champ de saisie. Il existe de nombreux plugins datepicker disponibles, mais jQuery UI Datepicker est l’un des meilleurs car il dispose de nombreuses options de personnalisation.

Dans ce tutoriel, nous allons vous montrer comment ajouter un sélecteur de date à un champ de saisie à l’aide de jQuery. Avec ce sélecteur de date, chaque fois qu’un champ de saisie spécifique est cliqué, un calendrier s’ouvre. L’utilisateur pourra choisir dans ce calendrier, une date (jour, mois et année).

Jquery UI

Tout d’abord, nous devons inclure la bibliothèque jQuery UI pour utiliser ses fonctions.

Fonctionnalité de base du sélecteur de date

Dans cet exemple, je vous montre comment ajouter un sélecteur de date à un champ de saisie.

Code Javascript

Nous devons spécifier l’ID du champ de saisie comme sélecteur de sélecteur de date.

$(function(){ $("#datepicker").datepicker();});

Code HTML

Lorsque vous vous concentrez sur le champ de saisie, un calendrier interactif s’ouvre.

<p>Date: <input type="text"></p>

Fonctionnalité avancée du Sélecteur de date

Dans les lignes suivantes, nous verrons comment utiliser le Sélecteur de date de manière plus avancée grâce aux multiples options qu’il nous offre.

Changer le format de la date

Par défaut, le plugin utilise le format MM/JJ/AAAA. En utilisant l’option DateFormat, nous pouvons modifier le format de la date en fonction de nos besoins.

$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});

Sélectionnez mois et année

Par défaut, nous changeons mois et année avec les flèches gauche et droite. Avec les options changeMonth et changeYear, nous pouvons afficher un menu avec lequel sélectionner le mois et l’année.

$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});

Restreindre une plage de dates

Avec Datepicker, vous pouvez sélectionner n’importe quelle date, mais si vous souhaitez la restreindre, vous pouvez utiliser les options minDate et maxDate.

$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});

Sélecteur de date de à

Dans l’exemple suivant, je vous montre comment implémenter un sélecteur de date dans lequel l’utilisateur doit entrer une date de et une date de. La miette de ce script est que la date à, ne peut jamais être antérieure à la date de.

Code HTML

L’utilisateur peut sélectionner n’importe quelle date dans le champ De, mais ne peut en sélectionner qu’une égale ou supérieure à la valeur précédente dans le champ De.

<p>Date: <input type="text"> TO <input type="text"></p>