Accueil > Partage de connaissances > Boîte à Outils > Calendrier
 Version imprimable

Boîte à Outils
Composant DHTML
Calendrier
Version actualisée

Ce calendrier a été conçu pour compléter utilement tout formulaire portant des champs de type ’date’.
J’attire votre attention sur la publication d’un article concernant un composant plus efficace et plus facile à mettre en oeuvre : reportez-vous à l’article n°126 pour en savoir plus...

Première publication le 17 mars 2004
Date de dernière mise en ligne : jeudi 3 juin 2004, par Richard BONMARIN

Votre site Web inclut un formulaire de saisie dont au moins un champ est de type ’date’ : si vous souhaitez proposer une assistance, ce calendrier est probablement la réponse à votre besoin...

Ce calendrier s’appuie sur la version 1.04 du module JavaScript "Date Picker" d’Erik Arvidsson. C’est là que se fait le plus gros du boulot !

Ma contribution consiste à fournir une page d’interface entre le formulaire de votre site et le module d’Erick : le calendrier est porté en pop-up, il peut être partagé entre plusieurs champs date d’un même formulaire et - last but not least - toute date déjà présente dans un champ sert à pré-renseigner le calendrier quand on clique sur le pictogramme correspondant.

Ce dernier point est très important car il permet d’associer le calendrier à une page de modification de données sans risquer de perdre la date initiale...

Astuce : Choisissez un format sans équivoque pour pré-renseigner un champ date avant de cliquer sur le pictogramme d’affichage du calendrier : ainsi "2004/12/6" ou "Dec 6, 2004" sont-il préférables à "6/12/2004" car le format par défaut est MDY (format américain : Month-Day-Year) ; "6/12/2004" désignera le 12 juin 2004 !

Vous trouverez ci-dessous un fichier ZIP portant tout le nécessaire pour mettre en oeuvre ce calendrier :
- le module JavaScript ’datepicker.js’ (v1.04 non modifiée) d’Erick,
- le module JavaScript ’calendar.js’,
- la page HTML ’calendar.html’,
- un exemple de formulaire à titre de démonstration, incluant un pictogramme provoquant l’affichage du calendrier.

En vous appuyant sur le fichier ’demo.html’, vous découvrirez la mécanique de fonctionnement de l’ensemble :

  1. le pictogramme associé à un champ de type ’date’ active une fonction ’show_calendar(formname,fieldname)’ de calendar.js,
  2. les noms du formulaire et du champ sont passés en paramètre : cela suffit pour propager la date du champ vers le calendrier,
  3. le calendrier s’affiche pour permettre de choisir une date quelconque,
  4. Reste à cliquer sur le bouton "OK" : la date choisie est alors transférée dans le champ du formulaire et la fenêtre du calendrier se ferme automatiquement.

Post-scriptum :

Suite à la remarque pertinente de Bertil, j’ai créé un répertoire demos/calendar/ permettant à tout un chacun de voir comment se comporte cet outil afin d’en juger l’utilité pour son propre site.

Vous pouvez dès à présent accéder à cette démo en cliquant sur le lien ci-dessous :

- Accès à la démo

A noter que le fichier ZIP a été actualisé pour inclure 2 pictogrammes oubliés (non bloquant) et modifier le délai nécessaire à la constitution de la fenêtre du calendrier : le délai initial de 500 millisecondes a été porté à 750 ms pour éviter un dysfonctionnement dans la communication entre les deux fenêtres.

Exprimez votre opinion sur cet article !

Il y a 5 contribution(s) au forum.


  • > Calendrier
    27 mai 2004, par tania

    Il y a mieux sur à l’adresse :
    http://www.tellaw.org/article.php?m...

    • > Calendrier
      3 juin 2004, par Richard BONMARIN

      Bonjour Tania,

      La page que tu proposes correspond à un calendrier au look plus sympa que celui d’Erick Arvidsson, mais j’aurais aimé y trouver des fonctionnalités identiques, en particulier la prise en compte de la date si elle est déjà renseignée et un format non équivoque ("Jul 07, 2004" est préférable à "12/7/2004" ou "7/12/2004").

      Je vais voir s’il est possible d’étendre les fonctionnalités de ce module pour répondre à mes besoins. Dans l’affirmative, il fera l’objet d’un article complémentaire.

      Amicalement,

      Richard

  • > Calendrier
    10 février 2004, par Bertil

    super, ça doit être bien, mais pour la démo, c’eut été encore mieux si on avait pu, directement sur ta page, cliquer le fameux pictogramme ouvrant la fenêtre en question ... à suivre, merci d’avance.

    • > Calendrier
      10 février 2004, par Richie

      Tu as raison : je vais créer sur le site un espace pour les démos de ce genre ; cela permettra de déterminer si, oui ou non, ce que je propose répond à l’attente...

      Merci pour ta remarque !

      • > Calendrier
        30 mars 2005, par Alain

        Bonjour,
        Ce date-picker est sympa, si je l’avais connu je n’aurais pas pris la peine d’en ecrire un autre !
        J’ai fait de mon cote un petit date-picker gratuit, un peu plus leger comme code (je crois) et facile a parametrer (je crois !). Si ca vous interesse vous pouvez le voir sur la page en reference.
        Il s’appelle carpe diem. Bonne cueillette de dates !

 

© R. BONMARIN, 2003-2011