Aller au contenu

Personnalisez le widget calendrier à votre image avec le Framework JavaScript jQuery UI partie 2

Et voici la suite du cours précédent pour apprendre à personnaliser le Widget Calendrier avec le Framework jQuery UI.

Vous allez découvrir les méthodes, les options et les événements pour gérer le widget calendrier sur le bout des doigts !

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Personnalisez le widget calendrier à votre image avec le Framework JavaScript jQuery UI partie 2

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, on continu ensemble pour que vous puissiez implémenter le calendrier, très facilement, le calendrier jQuery UI dans vos applications.

Calendrier – Les Méthodes

C’est la suite du cours précédent, on va voir les méthodes.
destroy ça permet de supprimer le calendrier,
dialog ça ouvre la boîte de dialogue du calendrier, et il y a différents arguments,
La date initiale, vous transmettez un objet date,
onSelect c’est une fonction de rappel,
callBack fonction de rappel, lorsqu’une date est sélectionnée vous pouvez appeler une fonction JavaScript pour par exemple, si vous avez date de départ, date d’arrivée, en callBack une fois qu’il a choisi sa date de départ votre utilisateur, dans la date d’arrivée vous réglez votre calendrier pour démarrer la date qu’il propose à partir de la date de départ, tout simplement.
Ensuite vous avez getDate ça retourne la date courante du calendrier sous forme d’un objet jQuery ou null si l’utilisateur n’a sélectionné aucune date,

Vous avez la méthode hide pour masquer le calendrier,
isDisable ça vous permet de savoir si le calendrier est désactivé, vous avez comme d’habitude, comme pour l’accordion, le menu onglet, les options, vous pouvez connaitre la valeur d’une option, la valeur de toutes les options, définir une ou plusieurs options,

setDate c’est pour rafraîchir le widget calendrier, déterminer la date par défaut du calendrier,
show pour ouvrir le calendrier, ça peut être fait par le code, par un bouton, pardon, pour ouvrir le calendrier, au lieu que ce soit toujours avec la balise input, c’est vous qui choisissez,

Après vous avez plusieurs utilitaires qui vont avec le calendrier comme formatDat, noWeekends, ça peut désactiver les dates correspondantes au week-end, parseDate, regional pour mettre un calendrier en langue française, c’est mieux pour vos internaute, je vais vous montrez tout ça dans le code source comment faire, setDefaut ça détermine les options par défaut des calendriers surtout si vous en avez plusieurs dans votre page, plutôt que de refaire la configuration de chaque calendrier, vous définissez les options par défaut, voilà, c’est aussi simple que ça.

beforeShow c’est un événement, ça appel une fonction avant que le calendrier soit affiché,
beforeShowDay c’est avant que chaque jour repris par le calendrier soit affiché,
datePicker, je vous ai mis des exemples, bien évidemment,

onClose c’est lorsque le calendrier est fermé, c’est un événement qui est appelé lorsque le calendrier est fermé, sur l’événement close vous pouvez appeler une fonction, quand l’utilisateur ferme le calendrier vous appelez une fonction JavaScript qui fait ce que vous voulez.
onChangeMonthYear c’est lorsque le calendrier change de mois ou d’année,
onSelect c’est lorsqu’une date est sélectionnée, vous avez tout un tas d’actions, d’événements que vous pouvez utiliser.

Exemple de Calendrier

Un exemple pratique ça va beaucoup mieux vous parler, on a notre calendrier, là on positionne notre calendrier pour qu’il s’ouvre à peu près proche de input, si je désactive ça, le calendrier va être centré, il va s’ouvrir au centre, tout simplement, en principe on ouvre à côté, c’est plus simple pour l’utilisateur, c’est beaucoup plus intuitif d’ouvrir le calendrier à côté du champ de saisie, et là il y a toute une sorte d’options, ça peut afficher des boutons sur le calendrier, aujourd’hui est fermé, je peux les masquer si je mets à false les boutons vont être masqués, tout simplement. Pareil pour afficher les autres mois, pour la possibilité de sélectionner des jours des autres mois, le nombre de mois, je peux afficher quatre mois si je veux en même temps, voilà, libre à vous, vous avez tout un tas d’options pour votre calendrier vraiment très simple à utiliser, la date pour mettre à jour la date dans le champ texte, voilà, update date qui est appelé ici, tout simplement, voyez c’est extrêmement simple d’utiliser le calendrier avec jQuery, vous pouvez sélectionner un date, voilà, non je veux la date d’aujourd’hui, c’est le 31, en fait, je ne veux pas changer de date, vraiment très simple à utiliser le calendrier jQuery.

Votre plan d’actions !

Comme d’habitude vous retrouverez le code source complet sous cette vidéo, sur Développement Facile, si vous avez des questions, posez-les sous la vidéo, et sinon je vous invite à voir la deuxième vidéo, il y a un lien au-dessus de la vidéo, ce cours vidéo, dans le deuxième cours je vous propose de vous accompagner pendant quatre mois, pour maîtriser les Framework jQuery, les Framework Dojo, les plug-ins jQuery UI, à travers plus de 60 cours vidéos, vous allez tout savoir, il suffit de cliquer sur l’image vidéo deux, au-dessus ou en-dessous, pour savoir, en attendant je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple du widget calendrier

Retrouvez le code source commenté du widget calendrier du Framework jQuery UI.

Téléchargement du code source Widget Calendrier avec le Framework jQuery UI

Cliquez ici pour télécharger le code source Widget Calendrier avec le Framework jQuery UI

Montrez-moi vos implémentations du widget calendrier

Partagez, dans la zone commentaires, la façon, avec le code source, dont vous avez personnalisé le calendrier jQuery UI.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>