Contrôle de calendrier avec jQuery

Lorsqu'un site Web doit saisir une date, le travail des internautes et le travail de validation du formulaire seront facilités par l'affichage d'un calendrier. 

En attendant que tous les navigateurs supportent le contrôle de calendrier de HTML 5, jQuery offre un datepicker qui s'occupe de ce travail.

Voyons comment intégrer ce contrôle dans un formulaire Web.

▼Publicité

Voici ce qui apparaît lorsqu'un usager clique sur une case de saisie de date configurée avec le datepicker :

Calendrier jQuery

Les étapes suivantes permettent d'implanter un calendrier datepicker jQuery :

  • Faites le nécessaire pour rendre jQuery et jQuery UI disponibles dans la page Web.
  • Ajoutez une fonction jQuery qui permet de définir comment le calendrier se comportera. Dans cet exemple, on souhaite que le nom des mois soit en français et que la date saisie soit sous la forme yy-mm.dd. 

    HTML

    <script>

    $(function() {

       $.datepicker.setDefaults($.datepicker.regional['fr']);

       $(".datepicker").datepicker({

          dateFormat: 'yy-mm-dd'

       });

    });

    </script>

  • Ajoutez une boîte de saisie qui servira à ajouter une date. C'est la classe CSS qui permettra de faire afficher le calendrier quand l'usager cliquera dans la boîte de saisie. 

    Notez que, malgré l'utilisation d'une classe faisant afficher le calendrier, il est possible de formater la case de saisie à l'aide de vos propres classes. Dans l'exemple suivant, deux classes sont appliquées à la boîte de saisie : la classe datepicker qui permet de faire afficher le calendrier ainsi que la classe saisiedate  qui permet de préciser la taille et l'apparence de la boîte de saisie selon les règles CSS définies dans la feuille de style du site Web.

    HTML

    <input type="text" name="ladate" class="datepicker saisiedate" />

    ou, si vous travaillez avec ASP.NET :

    ASP.NET

    <asp:TextBox ID="textBoxDate" runat="server" CssClass="datepicker saisiedate" />

Pour plus d'information

« Datepicker ». jQuery UI. http://jqueryui.com/demos/datepicker/

« ThemeRoller ». jQuery UI. http://jqueryui.com/themeroller/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories