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

mardi 13 septembre 2011

Bouton personnalisé dans un datepicker jQueryUI

Publié par Infinite Loop, à 18 h 47 0 commentaire

Remplacer un contrôle datepicker en JavaScript qui date de 2004 par celui de jQueyUI ? Oui ! N'importe quoi pour se débarrasser d'une vieille librairie dont le rendu jure avec le reste de l'application.

Dans la plupart des écrans, il était possible de choisir une date par le calendrier mais aussi de vider la valeur sélectionnée par un simple clic (ce qui avait pour effet de vider la valeur de l'input). Avec l'ancien contrôle datepicker, chaque input text accueillant une date était associé à une icône pour ouvrir le calendrier de saisie et une autre pour vider le champ. Contrairement à jQuery qui utilise des sélecteurs pour initialiser l'interface, celui-là avait du code HTML et JavaScript ajouté manuellement.

Comme j'allais le remplacer par le datepicker de jQueryUI, mon objectif était d'éviter d'avoir à ajouter du code à l'emplacement de chaque champ date (plus propre) et de voir s'il existait une option built-in à configurer. La documentation de jQuery indique qu'on peut ajouter un "button bar" qui comprend le bouton de fermeture mais contrairement au contrôle Dialog, il ne semble pas possible d'ajouter des boutons personnalisés (du moins, pas dans la version courante 1.8.16). Seul le libellé du bouton peut être modifié pour des fins de traduction.

Et pourquoi ne pas tenter de remplacer le fonctionnement du bouton pour qu'il fasse ce dont j'ai besoin ? Après tout, si on clique à l'extérieur de la zone du calendrier, il se ferme automatiquement, ce qui ne change en rien son comportement.



Pour remplacer le fonctionnement du bouton "Done" (Terminé) par "Clear" (Vider), j'y suis arrivé par un petit hack. Ça fonctionne bien pour les besoins de la cause mais je ne peux pas garantir que ce sera fonctionnel dans tous les cas ni dans les versions ultérieures. Voyez-le comme une solution temporaire pour ajouter simplement une option de configuration.

Pour commencer, référez-vous à la documentation du datepicker de jQueryUI pour l'intégrer à votre projet. Vous aurez probablement à définir des valeurs par défaut pour le contrôle et vous aurez au minimum besoin de celles-ci (remplacez $j par $ si vous n'utilisez pas l'option noConflict) :

$j.datepicker.setDefaults({
'dateFormat':'yy-mm-dd',
'buttonImageOnly': true,
'buttonImage': 'images/icon.gif',
'showButtonPanel' : true,
'showOn': 'both'
});
Si vous inspectez le DOM, vous remarquez que le datepicker s'insère dedans uniquement au premier appel (lorsque le calendrier apparaît à l'écran). Vous trouverez le HTML immédiatement avant la balise de fermeture du BODY. C'est pourquoi il faudra utiliser la fonction live() de jQuery pour que le hack fonctionne.
$j(document).ready(function(){
$j('button.ui-datepicker-close').live('click',
function(){
var id = $j('button.ui-datepicker-current').attr('onclick').replace(/.*gotoToday\('#(.*)'\);/gi, '$1');
if( $j('button.ui-datepicker-close', $j('#ui-datepicker-div')).html() == 'Clear' ){
$j('#' + id).val('');
}
}
);
});
La première chose à faire, c'est d'attacher un événement click en mode live sur le bouton qui possède la classe ui-datepicker-close. Il n'y en aura qu'un seul pour tous les champs de la page qui utilisent un datepicker. Dans le markup HTML généré sur demande pour le calendrier, le nom du champ associé (ID de l'input) se trouve passé en paramètre à une fonction attachée inline à l'élément. J'utilise une regex pour l'extraire de l'attribut. Enfin, je vérifie que le libellé du bouton est égal à "Clear" (ou toute autre valeur que vous aurez choisi selon votre personnalisation). Si c'est le cas, je vide l'input.

Certaines instances du calendrier pourront maintenant avoir ou non le changement de fonctionnalité du bouton. Pour qu'il l'ait, il suffira de changer le libellé du bouton en visant un ID en particulier ou un sélecteur CSS lors de l'initialisation.
$j(document).ready(function(){

// avec bouton close (standard)
$j('#datePicker1').datepicker();

// avec bouton Clear
$j('.datePicker2').datepicker({'closeText' : 'Clear'});

}
Vous auriez fait autrement ? Partagez votre solution!


Tags: JavaScript

0 réponse à "Bouton personnalisé dans un datepicker jQueryUI"


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)
        • Vérifier si une table existe dans Postgres
        • Devant une bibliothèque imposante
        • Les jeunes condamnés à la location perpétuelle ?
        • Citation no. 135 sur les grands penseurs
        • Tri conditionnel dans un énoncé SQL
        • Bouton personnalisé dans un datepicker jQueryUI
        • Mon top 3 photos du 11 septembre 2011
        • Citation no. 134 sur le mensonge
        • Sélectionner le 1er enregistrement de chaque group...
        • La réponse sera toujours 8
        • Récupérer l'ID d'un enregistrement inséré sous Pos...
        • Citation no. 133 sur l'art d'être bien informé
        • La survie du petit commerce
      • ►  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)
      • ►  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