web-dev-qa-db-ja.com

JQuery UI Datepickerにカスタムクラスを追加する方法

JQuery UIの日付ピッカーをトリガーするいくつかの入力があります。

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

作成されたjquery UIの日付ピッカーごとに、それをトリガーした入力のIDに基づいてカスタムクラスを割り当てたい、つまり.one、.two、.three

したがって、日付ピッカーが最初の入力によってトリガーされた場合、結果のHTMLは次のようになります。

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

最初のクラスoneに注意してください

これは可能ですか？日付ピッカーの 'create'メソッドが機能しないようです...

jqueryclassuser-interfacedatepicker
19
Mazatec

beforeShowを使用すると、datepickerを表示する前にclassを操作できます。

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

Demo （jQuery 1.6.2を使用しますが、 .removeClass() 関数を取る）

注これは、**一般的な$('input')セレクタを使用してすべてのクラス（つまり_<input>_ ids）を削除することで機能します。日付ピッカーに変更された_<input>_要素のみを取得するように制限したい。

編集これに賛成票を入れてコードを調べたところ、説明したとおりに動作しないようでした（たぶん、質問を誤解したかもしれません！） 。だから、これは日付ピッカーにクリックされた_<input>_のidに等しいクラスを追加するバージョンです。元の.removeClass()も使用するため、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);
   }
});​
_
37
andyb

Jquery UIカスタムダウンロードを使用すると、テーマにカスタムプレフィックスを追加できます。たとえば、「。datepicker_wrapper」というプレフィックスを追加した場合、このクラスを次のようにdatepickerに追加できます。

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

これを試して、複数の日付ピッカーのcssクラスを追加できます。

しかし、jQuery UI-v1.9.1は最新ではありません最後のバージョンは2012-10-25からです

HTML：

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

Jquery：

$('#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;
}

作業フィドル：

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

0
SoKo

私は単純に属性を設定し、クラスの代わりにそれを使用します。この場合、上書きされるため、何も削除する必要はありません。

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

jQで影響する

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

cSSで

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