0

我必须用不同的样式标记三种日子：Out_of_window、Free 或 Unavailable。不可用的必须被禁用。

我根据这个问题做了一个函数。而且我必须删除默认的 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.

 })

有什么想法吗？

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 回答