Ajouter un calendrier sur un champ dans un formulaire WordPress [vidéo]

Ajouter un calendrier sur un champ dans un formulaire WordPress [vidéo]

Sur votre site WordPress, vous avez sûrement un formulaire de contact qui permet à vos visiteurs de vous laisser un message. Voici un tutorial vidéo qui vous explique comment faire afficher un calendrier quand votre visiteur clique sur un champ donné.

Cette procédure fonctionne quel que soit le plugin wordpress que vous utilisez pour créer votre formulaire, et même si vous le faîtes à la main.

Ajouter un calendrier avec JQuery Datepicker

Pour afficher ce calendrier sur WordPress, nous allons utiliser le plugin jQuery Datepicker. Je vous laisse l’exemple en live sur mon formulaire de contact pendant encore quelques jours.

  • Durée: 11min 43
  • Niveau: intermédiaire
  • Public: webmaster

Pour agrandir l’écran: cliquez sur l’icône la plus à droite, celle qui montre les 4 coins d’un carré.

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N°7 : Ajouter un calendrier dans un formulaire avec un plugin jQuery »

Bonjour à tous. Ici Marie-Eve du blog les Doigts dans le Net. Aujourd’hui je vais vous montrer comment afficher un calendrier dans un formulaire sur WordPress. Alors ça devrait donner quelque chose comme ça. Vous voyez ici j’ai mon formulaire de contact et à la fin j’ai rajouté un champ « Naissance de votre site/blog » et quand on clique dans le champ, alors on a un petit calendrier qui apparaît de cette façon.

Comment afficher un calendrier sur un formulaire de WordPress, avec un peu de javascript jQuery ? 00:25

Pour les besoins de cette vidéo, je vais supposer que vous avez déjà un formulaire avec un champ. Si vous n’avez pas encore le champ voulu, vous pouvez aller l’installer tout de suite dans votre interface d’administration. Et nous, nous allons travailler sur ce champ HTML.

Donc vous voyez, c’est un champ complètement normal : quand je clique dessus, il ne se passe rien et je peux écrire à l’intérieur de façon habituelle. Donc vous savez que c’est une solution de laisser vos visiteurs écrire leur date eux-mêmes, par exemple comme ceci : 2012/02/12. L’inconvénient, c’est que certains vont l’écrire dans ce sens-là, d’autres vont écrire plutôt des dates comme ceci : 12 Février 2011. Et au final, vous allez avoir des dates avec beaucoup de formats différents. Ça ne sera pas standardisé et donc c’est dans votre avantage de plutôt installer un petit calendrier. Vous allez voir, ça ne prend que cinq minutes.

Plan de tutoriel 01:24

  • Comment installer un plugin jQuery ?
  • Quels sont les fichiers qui sont nécessaires pour travailler avec un plugin jQuery ?
    • 1/ la librairie jQuery
    • 2/ la librairie du plugin (datepicker)
    • 3/Fichier qui fait le lien entre HTML et le plugin : il va y avoir un fichier JavaScript tout à fait générique dans lequel vous allez faire vous-même le lien entre le champ HTML et le plugin que vous avez choisi.

Fichiers nécessaires pour utiliser un plugin jQuery 01:40

Alors la bonne nouvelle, c’est qu’avec WordPress, la librairie jQuery et la librairie du plugin datepicker est intégré en actif, c’est-à-dire que vous n’avez rien besoin de faire pour pouvoir les utiliser. Donc nous allons passer tout de suite à la troisième étape, enfin, pas tout à fait une troisième étape, mais au troisième fichier, à savoir donc le fichier qui va appeler le plugin sur notre champ HTML.

Créer le fichier javascript et le lier au site 02:26

Pour cela, je vais aller dans mon logiciel Aptana, c’est un logiciel qui me permet en fait de travailler directement sur les fichiers qui sont sur le serveur. Alors, je vais créer un nouveau fichier dans le fichier, dans le dossier de mon thème que je vais appeler « lddln.js ». Voilà, le fichier s’est ouvert.

Pour vérifier qu’il est bien inséré, je vais écrire un « alert(1); » dedans. Donc ça, ça va afficher une petite pop-up avec écrit « 1 » à l’intérieur. C’est juste pour vérifier si le fichier a bien été lié à mon site. Et donc évidemment, il faut que je le lie à mon site. Pour cela, je vais aller dans le fichier functions.php qui se situe dans mon thème et je vais rajouter cette partie de code :

wp_enqueue_script (
	'javascript appel plugin'
	,get_stylesheet_directory_uri(). '/lddln.js',
	'',
	'',
	true
);

Je vais le détailler avec vous.

« wp_enqueue_script() » : c’est une fonction qui permet en fait d’accrocher un fichier JavaScript à un site développé avec WordPress. Le premier paramètre que vous voyez « javascript appel plugin », donc c’est tout simplement un nom que l’on donne au fichier JavaScript qui est inséré pour que WordPress puisse le manipuler.

En deuxième position, nous avons « get_stylesheet_directory_uri ().’/lddln.js’ ». Attention, il s’agit bien de « uri » et pas « url » ; donc c’est un « i » à la fin. Ça, c’est une fonction qui va me renvoyer en fait le chemin de mon thème et auquel je concatène juste le nom de mon fichier. Donc vous mettez un « point » pour la concaténation et puis « ‘/lddln.js’ », à savoir le nom de mon fichier.

Le troisième et le quatrième paramètre ne sont pas renseignés, donc vous pouvez sauter. Et le cinquième paramètre, moi j’ai mis « true ». C’est en fait pour lui dire d’accrocher ce fichier à la fin de la page, et non pas au début. Et c’est en fait pour augmenter le temps de chargement de la page qui a une influence à la fois pour la satisfaction de nos visiteurs et également pour votre référencement. Donc je vous conseille toujours d’accrocher vos fichiers JavaScript à la fin de vos pages.

Voilà, donc maintenant le fichier « lddln.js » est supposé être bien accroché à mon site. Je vais tout de suite aller vérifier si j’ai bien la petite alerte ici « alert (1); » que j’avais écrite dans mon fichier JavaScript. Je vais vérifier si elle s’affiche bien sur mon site. Donc je fais F5 pour recharger le site et F12 pour ouvrir Firebug. Comme ça, si jamais il y a des erreurs, je les verrai.

Voilà : on a bien l’alerte qui apparaît. Donc pas de problème, le fichier est bien intégré à mon site.

Écrire le code dans le fichier jQuery 05:28

Nous allons aller véritablement écrire l’appel du plugin sur mon fichier JavaScript. Donc pour ça, j’enlève ça; je vais tout d’abord prévenir d’éventuels conflits entre JQuery et notre librairie :

 $j = jquery.noConflict(); 

. C’est toujours bien de faire ça parce que comme on utilise des plug-ins dans JavaScript, eh bien les plug-ins peuvent faire appel à leur propre librairie qui est peut-être une autre librairie que jQuery. Par exemple, il existe Mootools. Et donc à ce moment-là, il y aurait des conflits entre jQuery et Newtools. Donc avec cette petite ligne vous pouvez les prévenir très simplement.

Ensuite, j’appelle le «document ready » :

$j(document).ready(function () {[/cod . Ça, c’est aussi quelque chose de très classique. C’est pour tout simplement dire à jQuery d’attendre que la page soit totalement chargée avant d’exécuter le code. Donc vous voyez, c’est ça que ça dit, en fait; ça dit : « $j », c’est pour s’adresser à JQuery. Ensuite on a « (document) » puis « .ready », donc on dit à jQuery : « Tu attends que le document soit prêt », « (document).ready() ». C’est vraiment très facile; on peut presque le lire de gauche à droite avec un petit peu d’imagination, bien sûr.

Tout le code qui va se situer à cet endroit, là où je viens d’écrire cette petite phrase, s’exécutera quand la page sera chargée. 

Alors j’ai besoin de connaître l’identifiant du champ sur lequel je vais appeler mon calendrier. Donc pour ça, je retourne sur le front et je vais encore une fois m’aider de Firebug. Voilà. J’ai fait un clic-droit à partir du champ dans lequel je veux mettre le calendrier. Donc ça m’ouvre une vue ici vraiment de mon champ.

[code]<input id="cf2_field_8 class="single" type="text" value="" name="cf2_field_8">

Et donc ici vous voyez qu’il y a ID, et donc je vais copier tout simplement cet ID et donc je vais l’utiliser ici.

$j = jquery.noConflict();
$j(document).ready(function() {
    //à cet endroit
	$j('#cf2_field_8').datepicker();

Et voilà. Normalement, déjà avec ce code, ça devrait être suffisant pour appeler le calendrier au moins par défaut sur mon champ, dans mon formulaire. Donc nous allons tout de suite vérifier si c’est le cas. Bon déjà, je n’ai pas d’erreur dans ma console. Ah, je ne suis plus dans la console. Donc je vais retourner dans la console. Voilà, je n’ai pas d’erreur. Donc c’est une bonne nouvelle. Et maintenant, le grand moment qu’on attend tous.

Et voilà, le plugin JavaScript est bien en place. Alors je constate quand même deux problèmes. Tout d’abord, le calendrier n’est pas en français. Donc je vais vous montrer tout de suite comment le passer en français et ensuite on voit en haut ici qu’on a le mois, le mois en cours et les boutons « prev » et « next ». Donc toute cette petite partie-là en fait n’a pas été stylée par le CSS. Donc je vais vous montrer également comment styler cette partie-là en CSS.

Configurer le plugin jquery en français 08:38

Alors sur le site officiel de jQuery, j’ai été voir la documentation de Datepicker. Donc nous sommes sur http://jqueryui.com. Je vais voir la documentation de Datepicker. Donc si je vais voir dans les options ici. Ici il y a tout un tas d’options en fait qui nous permettent de configurer notre Datepicker un peu comme on veut et notamment vous voyez ici « dayNames », « dayNamesMin », « dayNamesShort », tout ça, ce sont tous des configurations pour les noms des jours. Il y a également des configurations pour les noms des mois.

Alors comme c’est un petit peu long, et qu’il y a beaucoup d’options différentes, je les ai recherchées avant de faire la vidéo. Donc je les ai sauvegardés ici. Donc je vous conseille juste de faire un copier-coller du code que je vais vous donner. Si vous avez envie de vous amuser avec JavaScript, avec JQuery, vous pouvez très bien venir sur le site lire la documentation. Ça ne pose pas du tout de problème.

Voilà. Ça, c’est ma petite sélection. Donc vous voyez, pour mettre les paramètres, je les ai mis entre accolades à l’intérieur des parenthèses et je fais passer. Donc chaque paramètre est un couple. Il y a d’abord sur la gauche une clef et sur la droite la valeur qui est sous forme de String.

Dateformat : 'dd-mm-jj'
Remarque : String = chaîne de caractère

On appelle string tout ce qui est entre double quote, comme ça. Donc tout ce qui apparaît en vert ici sur l’écran et chaque paire clef/valeur de paramètres est séparé par une virgule, que personnellement, je place en début de ligne. Voilà. Donc on va passer un petit peu en détail sur ces paramètres.

Tout d’abord, « dateFormat » qui va me permettre d’afficher la date : days, months, years ( dd-mm-yy). Et non pas year, months, days, comme c’est le cas dans le système anglo-saxon. Et ensuite, le nom des jours, le nom des jours en raccourci, le nom des jours en tout petit raccourci, vraiment avec deux lettres seulement. Pareil pour les mois et enfin le texte des boutons « prev » et « next » qui sont pour l’instant donc en anglais. Moi je vais mettre « suivant » et « précédent ».

Une fois que tout ca est fait, vous pouvez faire CTRL + S pour sauvegarder votre fichier. Retournez voir en front si les modifications ont bien été prises en compte. Je clique. Eh oui, nous voyons bien dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi. Donc le calendrier est bien passé en français. Maintenant, le mois aussi ici, juillet 2012. Il est bien passé en français. Par contre, on a toujours un problème au niveau du style : le style CSS n’a pas été pris en compte, toujours pas. Et donc ça, ça sera l’objet de la prochaine vidéo.

Donc voilà. Je vous dis à demain pour la suite de ce tutoriel et merci de l’avoir suivi. À très bientôt. Au revoir.

Fin de la transcription

Résumé du tutorial vidéo

  • Pré-requis: avoir un formulaire avec un champ input de type "texte" (le champ texte le plus classique qui soit)

Les 3 fichiers nécessaires

  • La librairie jQuery : déjà intégrée à WordPress
  • La librairie du plugin DatePicker: déjà intégrée à WordPress
  • Le fichier qui fait le lien entre le champ HTML et le plugin Datepicker : à créer

La procédure

  • Créer le fichier "le-nom-que-vous-voulez.js" sur le serveur
  • Le lier à votre site
    • Placer ce code dans functions.php
      /*********** Ajoute mon fichier javascript **********/
      wp_enqueue_script(
           "javascript appel plugin"
          ,get_stylesheet_directory_uri()."/le-nom-que-vous-voulez.js",
          '',
          '',
          true
      );
      /*********** Fin du code **********/
      
    • Ecrire le code suivant dans le fichier "le-nom-que-vous-voulez.js"
      $j = jQuery.noConflict();
      $j(document).ready(function(){
      $j('#cf2_field_8').datepicker();
      });
      
      N'oubliez pas de remplacer "cf2_field_8" par l'ID de votre champ
  • Vérifiez sur votre site que le calendrier s'affiche bien.
  • Pour configurer le calendrier en Français, modifiez votre code JS par celui-ci:
    $j = jQuery.noConflict();
    
    $j(document).ready(function(){
    
    $j('#cf2_field_8').datepicker({
    		dateFormat: "dd-mm-yy"
    		,dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]
    		,dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"]
    		,dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"]
    		,monthNames: ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Decembre"]
    		,monthNamesShort: ["Jan",,"Fev","Mar","Avr","Mai","Jui","Jui","Aou","Sep","Oct","Nov","Dec"]
    		,nextText: "Suiv."
    		,prevText: "Prec."
    	});
    });
    
    N'oubliez pas de remplacer "cf2_field_8" par l'ID de votre champ

Vous avez un site WordPress ? Vous voulez le modifier mais...

  • Vous ne savez pas par où commencer ?
  • Vous avez peur de casser votre site et d'être bloqué ?
  • Vous ne trouvez jamais le bon fichier ?
  • Vous perdez un temps fou à chaque modification ?
  • Le code vous impressionne ?
  • Vous n'avez pas de méthode de travail ?

Vous n'êtes pas seul ! De nombreux lecteurs de Les Doigts dans le Net sont dans votre situation.

J'ai préparé spécialement pour vous une formation pour vous aider. Inscrivez-vous avec le formulaire ci-dessous pour enfin modifier votre site WordPress comme vous voulez (gratuit et sans engagement) :

Modifier un thème WordPress : la méthode pas-à-pas

Bientôt disponible - Inscrivez-vous gratuitement pour ne pas rater la sortie





ajouter un calendrier dans un formulaire wordpress, ajouter un calendrier wordpress, calendrier jquery datepicker, calendrier wordpress, Jquery datepicker, tutorial wordpress

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

24 commentaires

  1. Super pratique lorsque l’on fait de la vente de service, lors du contact la personne peut indiquer le jour auquel elle veut être joint par le prestataire. Il faut juste penser à également rajouter un champ heures histoire de ne pas téléphoner à des heures où le client ne serait pas dans le coin. Tu l’utiliserais pour quoi d’autre toi ?

    Répondre
  2. A part pour le cas cité dans le commentaire précédent, je ne vois pas trop à quoi cela peut servir.

    Avez-vous une utilisation particulière d’un tel outil ?

    Répondre
    • Bonjour,
      Oui il en existe plein! Pour tous les services de location ou réservation (une chambre, un vélo, une voiture…), pour les achats en ligne de transports (ticket de bus, d’avion, réservation co-voiturage….), pour les rendez-vous en ligne (tel que le mentionne Adrien dans son commentaire précédent), pour récupérer la date de naissance (envoie d’un cadeau à date d’anniversaire, calcul de prime d’assurance en fonction de l’âge des membres de la famille…), pour récupérer une date quelconque (date de mariage, date d’anniversaire, date de naissance d’un blog, date de déménagement…)

      La liste est longue, il suffit de se demande: dans quelle situation serais-je amené à récupérer un champ date dans un formulaire ? Le calendrier remplace avantageusement les sempiternelles listes déroulantes : « de 1 à 31 » pour le jour, de « 1 à 12 » pour le mois et de « 1990 à 2020 » pour l’année. Il peut être traduit automatiquement en fonction de la langue du navigateur pour une meilleure expérience web.

      Répondre
  3. Merci pour cet article, je ne savais pas que l’on pouvait ajouter un champ calendrier dans le formulaire wordpress.

    Répondre
  4. Je ne savais pas qu’autant de librairies étaient déjà incluses à WP.. Je les avais réinstallées pour créer un plugin sur un de mes sites… je vais devoir alléger tout ca ! Merci pour l’info !

    Répondre
  5. Merci beaucoup pour ce tutoriel très explicite. C’est
    beaucoup plus esthétique et pro l’insertion de la date via un
    calendrier.

    Répondre
  6. Re-bonjour,
    j’ai un petit soucis, le code fonctionne parfaitement en local mais pas en ligne. Il me bloque également la visualisation de mes posts dans l’admin de WordPress, que je ne peux plus modifier.
    Avez-vous une idée de ce qui pourrait être à l’origine du problème ?
    Merci d’avance

    Répondre
    • Bonjour,

      Sûrement un conflit Javascript entre deux libraires (2 plugins). Voyez-vous une erreur dans l’onglet « console » de firebug ?

      Répondre
  7. Bonjour,
    merci de votre réponse, mais je n’ai pas de conflit qui s’affiche dans la console de debug. Vous pouvez le voir, j’ai réactivé la fonction.

    Répondre
  8. Ah si pardon, rafraîchissement de la page omit :
    « Uncaught TypeError: Object [object Object] has no method ‘datepicker’ calendrier_form.js?ver=3.6.1:6
    (anonymous function) calendrier_form.js?ver=3.6.1:6
    c jquery.js?ver=1.10.2:3
    p.fireWith jquery.js?ver=1.10.2:3
    x.extend.ready jquery.js?ver=1.10.2:3
    q jquery.js?ver=1.10.2:3 »

    Répondre
    • Ahah ! Ca me rappelle que j’ai déjà eu ce bug (ou pas loin), cela venait de la version de jQuery qui était pas bonne. Bon là je vois que vous avez la dernière en date…et même en double (essayez d’enlever le doublon)

      Je pencherais quand même pour un problème de ce côté là. Sois vous testez en local avec les mêmes librairies pour écarter cette raison, soit vous utilisez une autre librairie (de jQuery), soit un autre plugin jQuery qui fait les calendriers. Testez, testez, testez, ya pas d’autre solution !

      Bon courage,

      Répondre
  9. Bonjour,

    Je me mets à peine à WP, et je cherche justement à inclure un datepicker.

    J’ai suivi ce tutoriel, malheureusement j’ai une erreur du type :
    « TypeError: $j(…).datepicker is not a function ».

    J’en ai vite déduit qu’un conflit entre plusieurs inclusions de Jquery (ou une
    mauvaise déclaration) était à l’origine du problème, mais à priori tout est inclus
    correctement. Auriez-vous par hasard une idée? Je tourne en rond depuis en bon moment…

    Merci beaucoup.

    Répondre
    • Bonjour,

      J’ai déjà rencontré ce problème. Allez sur le site de jQuery http://jqueryui.com/download/ et téléchargez la bonne version de la librairie. Celle que vous avez ne suffit pas. Il faut tout décocher puis cocher uniquement DatePicker pour avoir la librairie Ad-Hoc.

      Revenez me dire si ça fonctionne !

      Répondre
      • Merci de votre réponse.

        J’ai essayé ça: j’ai téléchargé l’archive contenant « jquery-ui-1.10.3.custom.min.js ». J’ai placé ce dernier dans le répertoire « js’ de mon thème, et je l’ai inclus dans mon header.php de cette façon:

        <script type="text/javascript" src="/js/jquery-1.9.1.min.js »>
        <script type="text/javascrip src="/js/jquery-ui-1.10.3.custom.min.js »>

        Je n’ai plus d’erreur, mais pas de datepicker non plus…

      • Au temps pour moi, l’erreur est toujours là.

      • Bon ça a l’air de fonctionner cette fois.

        A priori le problème n’était pas celui que je pensais, il y avait en fait une erreur dans un autre fichier js « fix.js » qui à première vue sert à détecter les appareils android pour changer l’orientation de la page (si je comprends bien son contenu). Une fois corrigée l’erreur sur les $, mon calendrier s’affiche correctement.

        En tout cas merci pour le coup de main, vous m’avez ôté une fière chandelle du pied :)

      • Pas de problème Odile…euh Kelsow ! 😀

  10. Bonjour,

    Vidéo très intéressante qui a été très utile pour mettre à niveau mon blog mais il me semble pourtant qu’elle est est incomplète.
    Wordpress intègre bien les bibliothèques jquery mais il faut néanmoins veiller à activer d’une manière ou d’une autre la sous-bibliothèque jquery.ui qui, sauf erreur de ma part n’est pas active lors de la première installation.

    Personnellement, je l’ai activée en ajoutant dans mon fichier header.php les lignes suivantes

    wp_enqueue_script(‘jquery-ui-datepicker’);
    wp_enqueue_style(‘jquery-style’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’);

    Le fichier CSS pêché sur le CDN Google donne un joli look au calendrier.

    Merci pour vos articles, bonne continuation

    PS : A l’occasion, je vous proposerai peut-être un petit article sur la difficulté de créer une entreprise et de gérer en même temps le site web afférent

    Répondre
    • Bonjour,

      En effet, WordPress a beau intégré les bibliothèques, vous avez raison de souligner qu’il faut quand même indiquer au thème de les charger afin de pouvoir les utiliser. Je devrais modifier la vidéo.

      Avec plaisir pour votre article, ce sujet me plaît beaucoup. :)

      Bonne continuation également,

      Répondre
  11. Bonjour,

    Je recherche depuis un moment le moyen d’insérer un calendrier dans un formulaire et je suis tombé sur votre tutoriel qui me parait intéressent mais je n’arrive pas à le mettre en place hélas.. cela est peut être du au niveau de l’activation des bibliothèques jQuery. Je ne suis pas un As de l’informatique alors si vous voulez bien m’aider et me détailler les étapes.
    Merci beaucoup.

    Répondre
    • Bonjour,

      Il me semble que le tuto est déjà bien assez détaillé. Si ce n’est pas assez, tournez-vous vers un plugin wordpress, ce sera plus simple à installer !

      Répondre
  12. du grand art !
    je n’y connais rien en js, travaille depuis 3 jours sur WordPress, commence à peine à mettre mes pages en lignes, pour le moment cachées.
    en 20 minutes, j’ai rajouté le calendrier sur mon formulaire « ninja forms » en français.
    je pouvais l’appeler dans le champ date mais en anglais
    la manip complète a eu le meme résultat que l’option calendrier de ninja forms, preuve que ça fonctionne avec la satisfaction de comprendre !
    merci

    Répondre
    • Super ! Ca me fait plaisir quand un parfait débutant y arrive avec mes conseils. Bravo à vous !

      Répondre

Trackbacks/Pingbacks

  1. Les statistiques du blog en Juillet 2012 - Les Doigts dans le Net - [...] Ajouter un calendrier sur un champ dans un formulaire WordPress (20/07) [...]

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint