Le JavaScript "DatePicker" vous permet de choisir une date à partir d'un calendrier déroulant interactif plutôt que de le taper manuellement. Il est utilisé dans des scénarios où vous souhaitez planifier des tâches en fonction d'une date spécifique, comme la sauvegarde d'une date de naissance. UN "sélecteur de date"Peut être rapidement ajouté à un"champ de saisie" en utilisant le "plugin jQuery". Divers autres plugins DatePicker existent également; cependant, "jQuery ui datepicker"Se démarque sur le marché en raison de sa nature très flexible.

Ce message discutera de la procédure pour utiliser un JavaScript Datepicker. Alors, commençons!

Plugin jQueryui DatePicker

Le jQueryui "sélecteur de date»Le plugin permet à l'utilisateur d'entrer visuellement les dates. Il vous permet également de modifier facilement le format de date et sa langue, ajouter des options de navigation et limiter les plages de date. Pour utiliser toutes ces fonctionnalités, JQueryui propose un «sélecteur de date()»Méthode et ajoute de nouvelles classes CSS aux pages HTML en changeant leur apparence.

Syntaxe

$ (sélecteur).DatePicker (options);

Ici le "sélecteur»Le paramètre représente les sélecteurs CSS tels que«div»Ou tout nœud de modèle d'objet de document, et«options"Est un paramètre facultatif qui comprend différentes options telles que «DateFormat», «Closetext», «DayNames».

Maintenant, dirigeons-nous vers la mise en œuvre de JavaScript "sélecteur de date".

Comment utiliser JavaScript DatePicker

À des fins de démonstration, nous créerons une application JavaScript et ajouterons les fonctionnalités d'un base «sélecteur de date" à un champ de saisie. Pour faire de même, suivez les instructions étape par étape données:

Étape 1: Importer des bibliothèques requises

Tout d'abord, importez les bibliothèques requises dans le fichier HTML pour l'utilisation du plugin jQuery UI:

Étape 2: Ajouter des éléments HTML

Dans l'étape suivante, créez les éléments HTML souhaités dans votre application. Dans notre cas, nous ajouterons d'abord un «Titre» dans la balise «»:

Ensuite, une rubrique avec le «

”Tag et un paragraphe avec le«

”Tag, à l'intérieur du"" étiqueter:

Démonstration de l'utilisation de JavaScript DatePicker

Entrez la date:

Aussi, dans l'ajout "champ de saisie», Un calendrier interactif apparaîtra dans une superposition lorsque le champ de saisie est concentré.

Étape 3: code de fichier JavaScript

Passez à votre fichier JavaScript et écrivez le code suivant pour spécifier l'ID de champ de saisie "#sélecteur de date" comme "sélecteur»Paramètre du«sélecteur de date()" méthode. Ici, vous pouvez également ajouter des «options» de configuration avancées liées à JavaScript «sélecteur de date»Comme la modification du format de date:

$ (function ()
$ ("# datepicker").sélecteur de date();
DateFormat: "YY-MM-DD"
);

Étape 4: code de fichier CSS

Pour améliorer l'apparence de l'application JavaScript, définissez le style d'éléments HTML ajoutés dans le fichier CSS. Par exemple, nous ajouterons la couleur d'arrière-plan pour «corps«, Couleur de texte et famille de police pour le «H1» En-tête et «p» Éléments de paragraphe:

corps
Color d'arrière-plan: PowderBlue;

H1
Couleur: RVB (21, 7, 145);
Font-Family: «Courier New», Courier, Monospace;

p
Couleur: RVB (37, 25, 5);
Font-Family: Courier;

Étape 5: Lien CSS et JavaScript vers le fichier HTML

Enfin, liez les fichiers CSS et JavaScript au fichier HTML du projet JavaScript:

Voici comment notre «JavaScript Datepicker.html»Le fichier ressemble:

Étape 6: Exécutez l'application JavaScript

Après avoir ajouté tout le code requis, cliquez avec le bouton droit sur le fichier HTML, et dans le menu contextuel ouvert, sélectionnez le "Ouvert avec le serveur en direct" option:

Votre application JavaScript créée s'exécutera désormais dans le navigateur. Clique sur le "champ de saisie»Et choisissez une date parmi le«sélecteur de date»:

Nous vous avons montré la méthode pour utiliser un base JavaScript Datepicker. Vous pouvez explorer davantage au besoin.

Conclusion

JQueryui propose un «sélecteur de date()"Méthode qui vous permet de choisir une date à partir d'un calendrier déroulant interactif plutôt que de le taper manuellement. Un datepicker JavaScript est utilisé dans des scénarios où vous souhaitez planifier des tâches en fonction d'une date spécifique, comme la sauvegarde d'une date de naissance. Dans cet article, nous avons discuté de la méthode pour ajouter les fonctionnalités d'un base «sélecteur de date”À un champ de saisie.