Aller au contenu

Créez en 2 lignes de code un magnifique calendrier avec le Framework jQuery UI

Apprenez les 2 lignes de code pour ajouter rapidement un magnifique calendrier grâce au Framework jQuery UI.

Vous allez aussi découvrir toutes les options pour le personnaliser suivant les besoins de votre application web.

Tout est dans la formation ci-dessous.

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

Créez en 2 lignes de code un magnifique calendrier avec le Framework jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

On continue ensemble la série de cours consacrée au Framework jQuery UI, si vous ne savez pas ce que c’est, je vous renvoie à toute une série de cours sur le Framework jQuery, vous allez apprendre à l’utiliser, avec des exemples de mise en pratique, du code commenté, du code source, tout ce qu’il faut pour que vous puissiez progresser, et après, revenez sur les cours jQuery UI. Là vous allez apprendre à utiliser le fameux calendrier.

Calendrier

Le calendrier que l’on voit sur beaucoup de site, le calendrier qui s’affiche, très facile d’utiliser un calendrier, vous utilisez une balise div avec un id, et vous appliquez à cette id que vous récupérez avec jQuery UI, la méthode datePicker et ça y est, en deux lignes de code votre calendrier est créé.

Calendrier – Les Options

On va voir toutes les options du calendrier très rapidement, parce que tout est expliqué sur votre écran, vous n’avez qu’à lire, c’est des vidéos en HD, c’est très lisible.
altField ça permet de désigner un même autre champ de formulaire input qui recevra la date sélectionnée, que vous sélectionnez une date elle est directement reportée dans un champ de type input,
altFormat c’est le format en barre fonction, format anglais, format européen, le mois et le jour sont inversés, avec l’année donc vous pouvez définir le format de la date,
appendTexte ça peut ajouter un texte après la balise input consacrée au calendrier, c’est vous qui voyez, par défaut il n’y a pas de texte ajouté, mais vous pouvez rajouter du texte,
autoSize ça adapte automatiquement la largeur de l’élément input au format de date sélectionné,

Qu’est-ce que vous avez comme options ?
buttonImage vous pouvez faire apparaître le calendrier sur une image,
buttonImageOnly c’est uniquement sur l’ouverture,
buttonTexte le texte du bouton d’ouverture du calendrier,
calculateWeek si vous affichez les numéros de semaine de calendrier les semaines débutent à lundi, et l’option calculeWeek ça permet de définir votre propre fonction pour calculer les semaines de l’année, c’est des options, vous n’allez pas toutes les utiliser, ça bien évidemment, mais en tout cas vous avez le choix de personnaliser le calendrier jQuery selon les besoins de votre Internet et des désirs de vos internautes surtout,
changeMonth c’est pour afficher les mois sous forme de menu déroulant,
changeYear, pareil, les années sous forme de menu déroulant,
closeText c’est pour ajouter des boutons sur le calendrier, l’un pour sélectionner la date du jour, l’autre pour fermer le calendrier,
constrainInput sa force l’utilisateur à respecter le format de date spécifiée pour le calendrier, soit européen soit américain,

currentText c’est une option notions qui ajoute deux boutons au calendrier, l’un pour sélectionner la date du jour, l’autre pour fermer le calendrier, et l’option currentText ça permet de modifier le texte associé au bouton de sélection de la date courante, de mettre aujourd’hui, vu que nous on est en France, today, ça ne va pas parler à vos internautes, pas tous en tout cas, vous pouvez choisir le texte de votre bouton today et mettre aujourd’hui,
dateFormat c’est le format adopté pour afficher la date, je vous ai listé tous les formats possibles pour définir le format de votre date,

dayNames vous pouvez franciser le calendrier au lieu d’afficher Monday, Sunday, Tuesday, vous pouvez mettre le noms des jours dans une autre langue,
dayNamesMin avec les jours, les abréviations pour les jours,
dayNamesShort une autre façon d’abréger les jours,
defautDate ça détermine la date à l’ouverture du calendrier, très pratique si vous voulez mettre la date du jour, la date d’un départ de voyage, vous pouvez tout personnaliser avec le calendrier jQuery c’est puissant,

duration c’est pour ajouter une animation à l’ouverture et à la fermeture de votre calendrier, slow, normal, fast,
firstDay c’est le premier jour de la semaine, soit lundi, soit dimanche comme vous voulez,
gotoCurrent c’est pour le calendrier avec des boutons, je passe assez vite sur toutes les options parce qu’il y en a énormément,
maxDate vous pouvez définir la date maximum sélectionnable,
minDate c’est la date minimum sélectionnable quand vous avez des dates de voyages, départ, arrivée, maxDate et minDate ça permet de gérer ça, éviter que si je choisis une date de départ il peut pas arriver avec une date avant le départ, tout simplement, vous pouvez traduire les mois affichés aussi bien évidemment, les mois abréviations, le nombre de mois affichés simultanément, par défaut vous affichez un mois, des fois sur certains sites e-commerce, ou des sites de voyage par exemple, de réservation de train ou d’avions, vous pouvez afficher deux mois l’un à côté de l’autre, c’est très justifié pour vos utilisateurs, surtout quand ils voyagent en avion sur des périodes longues de vacances, quatre semaines, six semaines, afficher deux mois ça lui permet de sélectionner ses dates d’allée et de retour plus facilement.

prevText c’est le texte affiché au survol de la souris pour accéder au mois précédent,
je ne vous liste pas tout, vous avez tout qui est affiché sur votre écran,
showAnom c’est pour définir l’animation à l’ouverture du calendrier,
showButtonPanel, vous avez encore tout un tas d’options, je vous laisserais les regarder, mettre une pause sur la vidéo, elle est en HD, elle est très lisible en plein écran, je vous laisserais mettre une pause et lire.

Pareil pour ces options, et donc je défile les options encore parce qu’il y en a énormément et je vous montre enfin le code source de ce fameux calendrier. Vous avez utilisé le calendrier, voilà je le recharge, je clique ici, et je choisis ma date, par exemple le 2 aout, je clique ici je veux la date du jour, j’appuie sur aujourd’hui, on est le 31, 31/07, je veux sélectionner une autre date, non je me suis trompé, je ferme le calendrier, comment ça, c’est fait avec le code source ?
Comme je vous l’ai dit, vous avez un champ input Id calendrier pour choisir votre date, et vous associez cette Id calendar à date picture avec, là je le met en français le calendrier c’est beaucoup plus simple, mai 2014, lundi, mardi, mercredi, jeudi, vendredi, samedi, dimanche, juillet aout, septembre, le calendrier en français c’est beaucoup mieux, beaucoup plus pratique pour vous, donc je récupère bien évidemment, les langues pour la traduction du calendrier là j’utilise Google API, c’est un chargement beaucoup plus rapide et optimisé comme je vous ai conseillé de le faire, donc excusez-moi, pardon, donc pour la traduction du calendrier, comme je vous le disais ici, et vous avez toujours jQuery, jQuery UI, le thème donc un thème personnalisé qui est utilisé et donc avec les différentes options pour afficher les boutons sous le calendrier, pour afficher les autres mois, ça sélection des autres mois, pour sélectionner le jour et les autres mois, voilà, tout ce qu’il y a à savoir pour utiliser le calendrier tout simplement.
Voilà un petit peu, vous avez vu la simplicité du Framework jQuery UI pour intégrer un calendrier dans votre code.

Votre plan d’actions !

Comme d’habitude vous retrouverez sur Développement Facile, sous cette vidéo le code source complet à télécharger, les commentaires, et si vous voulez aller plus loin je vous conseille de regarder la deuxième vidéo, il y a un lien vidéo 2 en-dessous de cette vidéo, vous allez apprendre comment je peux vous aider pendant quatre mois, pour apprendre à travers une multitude d’applications, d’exemple de code source, de conseils à utiliser, des Framework jQuery, de l’extension jQuery UI et le Framework Dojo, tout est expliqué sur la deuxième vidéo au-dessus de cette vidéo, ou en-dessous il y a un lien, moi je vous dis à très bientôt pour le prochain cours 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 Le Widget calendrier du Framework jQuery UI

Cliquez ici pour télécharger le code source Le Widget calendrier du 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 utilisé 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 >>