Question

我必须标记三种不同风格的日子：Out_of_window，Free或Unavailable。必须禁用不可用。

I made a function based on this question。我不得不删除默认的datepicker类（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.

 })

有什么想法吗？

Answer 1

只需覆盖默认类：

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

Thanx to @adeneo（参见问题'coments）

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

如何在日期应用多种样式

1 个答案: