webentwicklung-frage-antwort-db.com.de

So fügen Sie meinem JQuery UI Datepicker eine benutzerdefinierte Klasse hinzu

Ich habe mehrere Eingänge, die JQuery UI-Datepicker auslösen, z.

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

Für jeden erstellten Jquery-UI-Datepicker möchte ich eine benutzerdefinierte Klasse basierend auf der ID der Eingabe zuweisen, die sie ausgelöst hat, d. H. .one, .two, .three

Wenn also der Datepicker durch die erste Eingabe ausgelöst wird, sieht das resultierende HTML folgendermaßen aus:

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

Beachten Sie die erste Klasse one

Ist das möglich? Die 'create'-Methode des Datepickers scheint für mich nicht zu funktionieren ...

17
Ash

beforeShow kann verwendet werden, um die class zu ändern, bevor datepicker angezeigt wird.

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

Demo (unter Verwendung von jQuery 1.6.2 benötigt aber jQuery> v1.4 für die .removeClass() , die eine Funktion übernimmt)

Hinweis Dies funktioniert, indem alle Klassen (d. H. <input>ids) mit einem ** allgemeinen $('input')-Selektor entfernt werden, den Sie möglicherweise einschränken möchten, um nur die <input>-Elemente zu übernehmen, die in Datumsauswahlfunktionen geändert wurden.

Edit Ich hatte nur eine positive Antwort und schaute den Code an, es schien nicht das zu tun, was ich erklärte, sollte es sein (vielleicht habe ich die Frage falsch verstanden!). Hier ist eine Version, die eine Klasse hinzufügt, die der id des <input> entspricht, auf die der Datepicker geklickt wurde. Verwendet auch das Original .removeClass(), damit dies mit jQuery> v1.2 funktioniert.

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

Mit dem benutzerdefinierten Download der Benutzeroberfläche der Jquery-Benutzeroberfläche können Sie Ihrem Design ein benutzerdefiniertes Präfix hinzufügen. Angenommen, Sie haben ein Präfix ".datepicker_wrapper" hinzugefügt. Sie können diese Klasse Ihrem Datepicker auf diese Weise hinzufügen:

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

Sie können dies versuchen, um CSS-Klassen für mehrere Datumsauswahl hinzuzufügen.

Aber denken Sie daran, dass jQuery UI - v1.9.1 nicht auf dem neuesten Stand ist. Die letzte Version ist vom 25.10.2012 .

HTML:

<input type="text" id="datepicker1" name='date1'/>
<input type="text" id="datepicker2" name='date2'/>

Abfrage:

$('#datepicker1').datepicker( {
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-yaer');
    },
    onClose: function(dateText, inst) { 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
        $(inst.dpDiv).removeClass('just-yaer');
    }
});

$('#datepicker2').datepicker( {
    changeMonth: true,
    changeYear: false,
    showButtonPanel: true,
    dateFormat: 'MM',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-month');
    },
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        $(this).datepicker('setDate', new Date(month, 1));
        $(inst.dpDiv).removeClass('just-month');
    }
});

CSS:

.just-yaer .ui-datepicker-prev,
.just-yaer .ui-datepicker-next,
.just-yaer .ui-datepicker-month,
.just-yaer .ui-datepicker-calendar {
    display: none;
}

.just-month .ui-datepicker-prev,
.just-month .ui-datepicker-next,
.just-month .ui-datepicker-year,
.just-month .ui-datepicker-calendar {
   display: none;
}

Arbeitsgeige:

http://jsfiddle.net/g6mnofu2/27/

0
SoKo

Ich würde einfach ein Attribut setzen und es anstelle der Klasse verwenden. In diesem Fall müssen Sie nichts entfernen, da es überschrieben wird

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

das zu beeinflussen in JQ

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

in CSS

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