Question

根据数据库中的数据在JQuery页面中创建一个动态日历，每个用户可更改日期。唯一的问题是我有一个日历，当从数据库加载需要只在星期日显示可选日期，这工作正常，但我需要一周中的其他几天每隔三天说红色...这一切都有效日期是可选择的，但如果不可选择则不会？

<style>
.ui-datepicker-calendar .shiftColor_C a {
  color: black;
  background: red;
  border-color: blue;
  padding:3px; 
}
.ui-datepicker-calendar .shiftColor_B a {
  color: black;
  background: green;
  border-color: blue;
  padding:3px; 
}
.ui-datepicker-calendar .shiftColor_A a {
  color: black;
  background: blue;
  border-color: blue;
  padding:3px; 
}
.ui-datepicker-calendar .shiftColor_D a {
  color: white;
  background: #551111;
  border-color: blue;
  padding:3px; 
}

</style>

<script type="text/javascript" language="javascript">

$(document).ready(function() {

 // Set the variable $width to the width of our wrapper on page load
     $width = $('#content').width();
     // Target all images inside the #content. This works best if you want to ignore certain images that are part of the layout design
     $('#content img').css({
          // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image
          // is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
          'max-width' : $width , 'height' : 'auto'
          });


//var array = ["8/13/2014","10/3/2014","8/25/2014"]  // date to exclude from cal, pulled from already assigned dates in DB
var array = ($("#myLeave").val());
//alert(array);
function myStartMonth() {
return '1/1/2015';
}

function noKelly(pick) {
  var kelly = ($("#myKelly").val()) - 1;
  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);
    //alert(array.indexOf(string) == -1 );
    return [ array.indexOf(string) == -1 ]
}

function unavailable(pick) {
  var myShift = ($("#myShift").val());
  var myRound = ($("#myRound").val());
  //var myRound = ($("#LabelRound").text());

  var utcPick = new Date(pick.getUTCFullYear(), pick.getUTCMonth(), pick.getUTCDate(), 0, 0, 0);
  var utcStart = new Date(2014, 0, 0).getTime(); //gets utc time
  var day = Math.round((utcPick - utcStart) / 86400);

  var nkd = noKelly(pick); 
  var nwe = noWeekEnds(pick);
  var assLeave = myAssignedLeave(pick);
  var osun = onlySunday(pick);

  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 Rnd1 = (true) && osun[0];  ; // First Round full weeks

  var Shift = "";
  var 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");; 

  if(myRound == "ROUND 1") Shift = Rnd1;

  //alert(myRound + " -- " + Rnd1 + " -- " + Bshift);

  var start = new Date(2015,0,11);
  var end = new Date(2016,0,9);
  if(pick < start || pick > end) return [false, ShiftColor, "Selection"];

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

解决方法是改变我的不可用功能，如下所示：

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 aaa = aa(pick);
var shift = (day % 3 === 0) && aaa[0] && nwe[0];

if((day % 3 === 0) && (aaa[0] === false))
    return [ false, 'green', 'Green!' ];

if((day % 3 === 0) && (nwe[0] === false))
    return [ false, 'green', 'Green!' ];

return [shift, "red2", "Unavailable"]  
}

Answer 1

这对你有用吗？

http://jsfiddle.net/prollygeek/akgqjun2/5/

$(".ui-state-default").filter(function() {
    return $(this).text() === "3";
}).css("background","red")
})

Answer 2

改变我的不可用功能解决了这个问题。添加了一些if语句。

这是一个工作小提琴：http://jsfiddle.net/jeffbarclay/akgqjun2/6/

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 aaa = aa(pick);
var shift = (day % 3 === 0) && aaa[0] && nwe[0];

if((day % 3 === 0) && (aaa[0] === false))
    return [ false, 'green', 'Green!' ];

if((day % 3 === 0) && (nwe[0] === false))
    return [ false, 'green', 'Green!' ];

return [shift, "red2", "Unavailable"]  
}

DatePicker为不可选日期指定颜色

2 个答案: