skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

dimanche 29 mars 2009

Calendrier jQuery UI

Publié par Infinite Loop, à 13 h 11 2 commentaires

Je viens de m'amuser pour la première fois avec jQuery User Interface. C'est vraiment du beau boulot! En allant de l'animation, aux effets, en plus d'ajouter les widgets et les thèmes, il y a de quoi s'amuser et créer des interfaces attrayantes en un tour de main.

Parmi les widgets disponibles, il y a :

  • l'accordéon
  • un sélectionneur de date (calendrier)
  • une boîte de dialogue (modale)
  • une barre de progression
  • un curseur de défilement
  • les onglets
Contrairement à d'autres librairies JavaScript, il faut avouer que les démos et les exemples sont bien documentés et faciles à réaliser.

Pour ma part, j'ai fait mes premières expériences avec le calendrier qui permet à l'utilisateur de sélectionner une date facilement, tout simplement parce que c'est le type de contrôle que j'utilise régulièrement dans mes formulaires. J'ai été surpris de voir à quel point celui de jQuery UI est complet. D'abord, il s'initialise facilement, il suit les règles esthétiques d'un thème qui peut se marier agréablement avec les autres contrôles et il est très flexible. Je publie ici le résultat commenté de mon premier test.

Après avoir sélectionné les options, le thème et téléchargé le tout, j'ai pris tous les fichiers et je les ai placés dans mon projet à cet emplacement : /js/jquery-ui.

Dans ma page web, j'ai chargé les librairies :
  • d'abord jQuery
  • ensuite le noyau UI et le datepicker
  • l'internationalisation, pour afficher le contrôle dans la langue de notre choix
<script type="text/javascript" src="/js/jquery-ui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="/js/jquery-ui/development-bundle/ui/ui.datepicker.js"></script>
Ensuite le thème de base en CSS :
<link type="text/css" href="/js/jquery-ui/development-bundle/themes/base/ui.all.css" rel="Stylesheet" />
Dans le HTML, j'ai crée un formulaire et j'y ai ajouté un champ texte, par exemple pour inscrire une date de naissance :

<input type="text" id="birthdate" />

Pour contrôler la grosseur du calendrier, j'ai dû ajuster le CSS pour réduire ses dimensions. Comme le reste du texte de ma page en était affecté, j'ai forcé la taille du texte dans différentes balises.
<style type="text/css">
body {
font-size: 62.5%;
}

// voir plus loin
#inlineCalendar {
font-size: 62.5%;
}

div, p {
font-size: 12px;
font-family: arial;
}
</style>
Pour initialiser le datepicker, j'ai créé un objet JS qui définit le format de date international (ISO 8601) du type "2008-03-29". Comme vous le verrez plus loin, d'autres options pourront être ajoutées.
var dp_config =  { dateFormat: 'yy-mm-dd' };
J'initialise le contrôle pour afficher le datepicker lorsque le champ qui possède l'ID "birthdate" recevra le focus.
function initialize() {
$('#birthdate').datepicker(dp_config);
}

$(document).ready( initialize );
Configurer le calendrier en français

Par défaut, le calendrier s'affiche en anglais. Quelques petites modifications sont nécessaires pour le configurer en français (ou tout autre langue désirée, le répertoire d'internationalisation, i18n, semble contenir environ 40 langues prédéfinies).
// charger le fichier d'internationalisation global
<script type="text/javascript" src="/js/jquery-ui/development-bundle/ui/i18n/jquery-ui-i18n.js"></script>

// ou mieux, charger seulement la langue française
<script type="text/javascript" src="/js/jquery-ui/development-bundle/ui/i18n/ui.datepicker-fr.js"></script>
Dans l'objet dp_config, on pourra aussi redéfinir les entêtes de colonnes pour les noms de jours pour passer d'une abréviation de deux lettres à une seule :
var dp_config =
{
dateFormat: 'yy-mm-dd',
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S']
};
Dans la fonction d'initialisation, j'ai appelé la fonction setDefaults() pour paramétrer deux éléments de langue :
  • showMonthAfterYear : false, pour afficher "mars 2009" au lieu de "2009 mars"
  • $.datepicker.regional['fr'] pour indiquer à i18n de charger le package de langue français
function initialize() {
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['fr']));
$('#birthdate').datepicker(dp_config);
}
Avec ceci, mon calendrier / datepicker était 100% fonctionnel en français.

Un peu plus d'options

En lisant la documentation, d'autres ajouts intéressants sont possibles, que j'ai placé dans dp_config (cet objet ne fait pas parti de la suite jQuery, c'est une façon que j'ai de structurer mon code pour qu'il soit plus lisible). Comme pour dateFormat et dayNamesMin, il faut ajoute une ligne à la fin pour chaque option désirée (clé/valeur, séparée par une virgule, sauf le dernier) :
  • Permettre de changer de mois et/ou d'année. Comme c'est un champ pour saisir la date de naissance, on spécifiera yearRange pour permettre au calendrier de reculer 100 ans en arrière et 0 année en avant (année courante) :

    changeMonth: true,
    changeYear: true,
    yearRange: '-100:+0'

  • Afficher deux mois consécutifs (ou plusieurs), comme le font les sites de voyage :

    numberOfMonths: 2

  • Affichage des boutons pour revenir au mois courant et pour forcer la fermeture du datepicker :

    showButtonPanel: true

  • Ajouter un effet graphique d'animation à l'affichage du calendrier :

    showAnim: 'fadeIn'

  • Afficher le calendrier inline dans le HTML. Il suffit de créer une balise DIV dans le HTML et attacher le calendrier au DIV plutôt qu'au champ du formulaire dans la fonction initialize().

    $('#divInlineCalendar').datepicker(dp_config);


Tags: JavaScript

2 réponses à "Calendrier jQuery UI"

  1. Anonyme a dit...
    14 décembre 2009 à 06 h 43

    Très intéressent !! Je trouve qu'il manque malgré tout un exemple concret !!!

    Anonyme a dit...
    6 janvier 2011 à 06 h 41

    meme remarque, j'essaye de récupérer et formater des donnees de date en internationale et c la pure galere.
    Les exemples sont beaucoup trop simple et ne retourne pas les date formate sur certaine fonction. en plus, des fonctions de déclaration sont bizarrement non inclus dans les options: 'regional' par exemple mais doivent etre declare à l'exterieur. Le code est simple mais comme d'hab les exemples concret manques.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ▼  mars 2009 (37)
        • Étui pour ordinateur portatif
        • Pagination des résultats sous SQL Server
        • Calendrier jQuery UI
        • Citation no. 23 sur l'ambidextrie
        • Poster son statut Twitter avec PHP
        • Informatique du film Jurassic Park
        • XML valide pour RSS
        • Gadgets électroniques et informatiques
        • Redéfinition de classe PHP
        • Origines du Hello World
        • Diaporama de photos en JavaScript, partie 2
        • Citation no. 22 sur la simplicité
        • Diaporama de photos en JavaScript, partie 1
        • Sortie officielle de Internet Explorer 8
        • Convertir l'encodage d'une page avec Dreamweaver
        • Comparaison de texte PostgreSQL
        • Lister les fichiers d'un répertoire en PHP
        • Pages 404 originales
        • Erreur curieuse en PHP : Paamayim Nekudotayim
        • Citation no. 21 sur les mots de passe
        • Manipuler une archive TAR compressée (gzip)
        • Une histoire de pixel brûlé
        • Il n'y a pas d'Easter Eggs dans ce programme
        • Adresse de courriel temporaire jetable
        • Bande dessinée sur la sécurité informatique
        • Populer un formulaire automatiquement
        • Interface countable en PHP
        • Conteneurs HTML à coins ronds
        • Citation no. 20 sur les consommateurs mécontents
        • Conférence PHP Québec 2009 - Jour 3
        • Manipuler une archive TAR
        • Conférence PHP Québec 2009 - Jour 2
        • Conférence PHP Québec 2009 - Jour 1
        • Analyser et configurer les paramètres GET et POST
        • Protéger son code PHP avec Zend Guard
        • Hébergement PHP gratuit
        • Citation no. 19 sur la consommation d'alcool
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft