web-dev-qa-db-fra.com

Comment ajouter une classe personnalisée à mon Datepicker de l'interface utilisateur JQuery

J'ai plusieurs entrées qui déclenchent, par exemple, les datepickers de l'interface utilisateur JQuery.

<input id="one" type="text"/>
<input id="two" type="text"/>
<input id="three" type="text"/>
<input id="four" type="text"/>

Pour chaque datepicker de l'interface utilisateur jquery créé, je souhaite affecter une classe personnalisée en fonction de l'ID de l'entrée qui l'a déclenchée, à savoir .one, .two, .three

Donc, si le sélecteur de date est déclenché par la première entrée, le code HTML résultant ressemblera à ceci:

  <div class="one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div">

Notez la première classe one

Est-ce possible? La méthode 'create' du datepicker ne semble pas fonctionner pour moi ...

jqueryclassuser-interfacedatepicker
17
Ash

beforeShow peut être utilisé pour manipuler la class avant d'afficher le datepicker.

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(function() {
           return $('input').get(0).id; 
       });
       $('#ui-datepicker-div').addClass(this.id);
   }
});

Demo (utilisation de jQuery 1.6.2 mais nécessite jQuery> v1.4 pour la .removeClass() qui prend une fonction)

Note Ceci fonctionne en supprimant toutes les classes (c'est-à-dire <input>ids) avec un sélecteur ** général $('input') que vous voudrez peut-être limiter à la sélection des éléments <input> qui ont été modifiés en sélecteurs de date.

Edit Je viens d'avoir un vote positif pour cela et en regardant le code, il n'a pas semblé faire ce que j'avais expliqué qu'il devrait (peut-être que j'ai mal compris la question!). Donc, voici une version qui ajoute une classe égale à la id du <input> cliqué sur le sélecteur de date. Utilise également la .removeClass() d'origine afin que cela fonctionne avec jQuery> v1.2.

var inputIds = $('input').map(function() {
    return this.id;
}).get().join(' '); // space separated ready for removeClass

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(inputIds);
       $('#ui-datepicker-div').addClass(this.id);
   }
});​
33
andyb

Le téléchargement personnalisé de Jquery UI vous permet d’ajouter un préfixe personnalisé à votre thème. Par exemple, si vous avez ajouté un préfixe ".datepicker_wrapper", vous pouvez ajouter cette classe à votre datepicker de cette façon:

 $('.datepicker').datepicker({
      beforeShow : function(){
           if(!$('.datepicker_wrapper').length){
                $('#ui-datepicker-div').wrap('<span class="datepicker_wrapper"></span>');
           }
      }
 });
3
Herbi Shtini

Je voudrais simplement définir un attribut et l'utiliser au lieu de la classe . Dans ce cas, vous n'avez pas besoin de supprimer quoi que ce soit car il sera remplacé

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').attr("inputId",this.id);
   }
});

l'affecter dans JQ

$('#ui-datepicker-div[inputId=your_ID_here]')

en CSS

#ui-datepicker-div[inputId=your_ID_here]{}
0
Zeev G