2. Ajoutez votre contribution

Créer 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 !

","image":"http://www.luping.net/uploads/20241009/17284428126705f1bc90a10.jpg","datePublished":"2024-11-03T20:05:55+08:00","dateModified":"2024-11-03T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Élevez votre sélection de dates avec DeskyCalendar : une solution Vanilla JS

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

Publié le 2024-11-03
Parcourir:328

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

Vous cherchez à améliorer vos formulaires sans les superflus ? 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 ? Très facile!
Configuration rapide

1. Incluez CSS et JS

Déposez simplement ces liens dans votre HTML :


2. Ajoutez votre contribution

Créer 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 !

Déclaration de sortie Cet article est reproduit sur : https://dev.to/daniele_rugginenti_fecc8b/elevate-your-date-selection-with-deskycalendar-a-vanilla-js-solution-50h4?1 En cas de violation, veuillez contacter study_golang@163 .com pour le supprimer
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3