Datepicker更改可选日期颜色CSS

Question

我有一个日期选择器，其中包含动态设置的天数颜色。可选择的唯一日期仅设置为所有星期日。我的颜色模式设置为每隔三天 - 不可选日期为柔和的红色，可选日期为鲜红色。 - 我希望可选日期与其他日期相同。

可选单元格上的CSS类似于：class ui-datepicker-week-end shiftColor_C ui-datepicker-current-day

关于不可选择的单元格的CSS看起来像：class ui-datepicker-unselectable ui-state-disabled red_day_off

我已经设置了http://jsfiddle.net/jeffbarclay/hnjv3L8e/1/工作副本！

CODE：

var array = ["8/19/2014","11/19/2014","08/25/2014"]

function noKelly(pick) {
  var kelly = 4;
  var dow = pick.getDay();
    if(dow==kelly) return [false,''];
    return [true,''];  
}

function noWeekEnds(pick) {
var dow = pick.getDay();
if (dow > 5 || dow < 1) return [false, ''];
return [true, ''];
}

function onlySunday(pick) {
var dow = pick.getDay();
if (dow > 0) return [false, ''];
return [true, ''];
}

function myAssignedLeave(pick) {
    var string = $.datepicker.formatDate('m/d/yy', pick);
    return [ array.indexOf(string) == -1 ]
}

function unavailable(pick) {
var utcPick = new Date(pick.getUTCFullYear(), pick.getUTCMonth(), pick.getUTCDate(), 0, 0, 0);
//-- converts your pick to utc time
var utcStart = new Date(2014, 0, 0).getTime(); //gets utc time
var day = Math.round((utcPick - utcStart) / 86400);
var nwe = noWeekEnds(pick);
var nkd = noKelly(pick);
var assLeave = myAssignedLeave(pick);
var osun = onlySunday(pick);
var Rnd1 = (true) && osun[0];   // First Round full weeks

var myShift = "B";

var Ashift = (day%3===0) && nkd[0] && assLeave[0];  // A Shift
var Bshift = (day%3===1) && nkd[0] && assLeave[0];  // B Shift
var Cshift = (day%3===2) && nkd[0] && assLeave[0];  // C Shift
var Dshift = (true) && nwe[0] && assLeave[0];  // D Shift

var Shift = "";
var ShiftColor = "";
var ShiftColorDayOff = "false";
var DO_ShiftColor = "";

if(myShift=="A") (Shift = Ashift) &&  (ShiftColor = "shiftColor_A");
if(myShift=="B") (Shift = Bshift) &&  (ShiftColor = "shiftColor_B");
if(myShift=="C") (Shift = Cshift) &&  (ShiftColor = "shiftColor_C"); 
if(myShift=="D") (Shift = Dshift) &&  (ShiftColor = "shiftColor_D"); 


//var shift = (true) && osun[0];
Shift = Rnd1;

if((day%3===1) && (osun[0] === false)) return [ false, 'green_day_off', 'unavailable' ];

return [Shift, ShiftColor, "Unavailable"];  
}

$(document).ready(function () {
$("#datepicker").datepicker({
    beforeShowDay: unavailable
});

$('#datepicker').attr('readonly', true);
});

Answer 1

找到两种方法来解决这个问题：

1）将样式

中的可选单元格的不透明度更改为.35

.ui-datepicker-calendar .shiftColor_C a {
  color: white;
  background: red;
  border-color: black;
  padding:3px; 
  opacity: .35;
}

2）将不可选择的单元格中的不透明度增加到0.99样式

.ui-datepicker .ui-state-disabled {
  opacity: .99;
}

这两种方法都会给出一致的外观。

示例：http://jsfiddle.net/jeffbarclay/hnjv3L8e/5/

SO中的有用链接：multiDatesPicker: how to disable clicking without changing date button color?