Maison > interface Web > js tutoriel > Élevez votre sélection de dates avec DeskyCalendar : une solution Vanilla JS

Élevez votre sélection de dates avec DeskyCalendar : une solution Vanilla JS

Patricia Arquette
Libérer: 2024-09-23 08:30:32
original
882 Les gens l'ont consulté

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

Vous cherchez à améliorer vos formes sans les peluches ? Découvrez DeskyCalendar, un sélecteur de dates minimaliste et réactif conçu en JavaScript pur vanille. Il est conçu pour ajouter du style et des fonctionnalités à votre processus de sélection de dates sans alourdir votre projet.

Page de démonstration et de projet

page de démonstration -> https://danruggi.github.io/datepicker/
lien du projet -> https://github.com/danruggi/datepicker

Principales fonctionnalités

? Entièrement réactif : superbe sur n'importe quel appareil : fini les calendriers écrasés.
? Format Double / Simple : Choisissez facilement entre la sélection d'une date unique ou d'une plage.
? Ajoutez l'option « N'importe quelle date » : donnez aux utilisateurs la liberté de sélectionner n'importe quelle date, parfaite pour les filtres et les rapports.
? Désactiver les dates : empêchez les sélections de dates passées ou futures, en gardant tout sous contrôle.
? Exécuter une fonction externe au clic : souhaitez-vous déclencher une action personnalisée lorsqu'une date est sélectionnée ? Facile comme bonjour !
Configuration rapide

1. Incluez CSS et JS

Déposez simplement ces liens dans votre HTML :


2. Ajoutez votre contribution

Créez un champ de saisie :

3. Initialisez le calendrier

Configurez-le avec une simple ligne de JavaScript :

nouveau DeskyCalendar({'myID': {}});

Exemples minimaux

Deux colonnes

Passez facilement à une sélection de double date :

nouveau DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

Désactiver les dates

Vous souhaitez restreindre les dates ? Ajoutez simplement

const d = nouvelle Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
Conclusion

En quelques lignes seulement, DeskyCalendar apporte sophistication et simplicité à vos besoins de sélection de dates, tout en étant léger et efficace. Il est temps de mettre à niveau vos formulaires avec cette solution élégante. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal