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

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!