jQuery UI datepickerのカスタマイズ月間

Question

ui datepickerで毎月カスタマイズする必要があります。つまり、月ごとに異なる背景イメージが表示されます。私は次のことをすると思います：

<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div> 

私は現在の月の名前を取得して、日付ピッカーのコンテナにクラスとして追加できますか？

大変感謝しています。

Answer 1

たとえば、月の番号を使用できます。 または.monthJanuary - .monthDecember（または他の形式）これは個人的に私は他の文化の数字に固執しますが、あなたは両方の方法でこの答えを適応させることができます。私は上記の月番号を使用していることから、それは次のようになり、

$('#datepicker').datepicker({ 
    onChangeMonthYear: function(year, month, inst) { 
     //Month number (1-12) is month 
     //Month name you can get by $("#datepicker .ui-datepicker-month").text() 
     $(this).closest("div.calendar-container") 
       .removeClass().addClass("calendar-container month" + month); 
    } 
}); 

そして、ページのロード時（日付ピッカーを作成した後）は、最初にそれを設定します：このような日付ピッカーのonChangeMonthYear eventを使用

$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1)); 

あなたは、代わりに使用する名前を使用していた場合：

$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text()); 

あなたが一緒に行くどのオプション、ちょうどあなたがしたい背景画像/スタイリングで12クラスを作成します。 You can test it out here。あなたは背景が実際に日付ピッカー自体になりたかった場合は、いないこと.calendar-container<div>あなただけの、たとえば、それをより具体的にするためにCSSセレクタにそれを追加したい：

.month1 .ui-datepicker-inline { background: url(January.jpg); } 

You can test out that version hereを。