0

Out_of_window、Free、または Unavailable の 3 種類の日を異なるスタイルでマークする必要があります。使用不可を無効にする必要があります。

この質問に基づいて関数を作成しました。そして、デフォルトの日付ピッカー クラス ( ui-state-default) を削除する必要がありました。そうしないと、bg-image.

月が変わるまで、すべてが希望どおりに機能します。元の月に戻ると、その日は元のクラス ( ui-state-default) に戻り、日の種類に応じてカスタマイズされたスタイルはもうありません。

だから、私は次のコードを持っています：

 var pick_up_out_of_window_dayDates = new Array("2012-12-11","2012-12-12");

 var pick_up_free_dayDates = new Array("2012-12-21","2012-12-22");

(グローバルなものとして)

 function applyDayStyles(date){


var enabled = true;
var cssClass = "";
console.log(date);
var day = date.getDate();
var month = date.getMonth() + 1; //0 - 11
var year = date.getFullYear();
var compare = year  + "-" + month + "-" + day;

var pick_up_out_of_window_day = pick_up_out_of_window_dayDates.indexOf(compare) + " " + compare
var pick_up_free_day = pick_up_free_dayDates.indexOf(compare) + " " + compare

if (pick_up_out_of_window_dayDates.indexOf(compare) >= 0){
    cssClass = "pick_up_out_of_window_dayCalendar";
    console.log(1);
    return  new Array(enabled, cssClass, pick_up_out_of_window_day);

}
else
if (pick_up_free_dayDates.indexOf(compare) >= 0){
    cssClass = "pick_up_free_dayCalendar";
    console.log(2);
    return new Array(enabled, cssClass, pick_up_free_day);
}
else
    return new Array(false, cssClass, date);

}

 $(document).ready(function() {

        $(".datepicker").datepicker({
            minDate: 0,
            beforeShowDay: applyDayStyles
    })
   //{edited}
   // this is un necesssary !
   // $('.pick_up_free_dayCalendar').children().removeClass('ui-state-default').addClass('pick_up_free_dayCalendarIN'); // I Had to add this line to remove the defaukt bg style.

 })

何かご意見は？

4

1 に答える 1

0

デフォルトのクラスをオーバーライドする必要があります：

 .datepicker .pick_up_out_of_window_dayCalendar .ui-state-default {background: red;}
 .datepicker .pick_up_free_dayCalendar .ui-state-default {background: blue;}

@adeneoに感謝します（質問のコメントを参照してください）

http://jsfiddle.net/Cwg3P/2/

于 2012-12-11T16:55:51.047 に答える