我有以下内容:
$("<style>")
.prop("type", "text/css")
.html("\
#markDates {\
color: #FF0000;\
}")
.appendTo("head");
然后我将这个课称为:
$('#multidatepicker').multiDatesPicker({
//onClose: function (value, date) {
// //debugger;
// date.dpDiv.find('.ui-state-default').css('background-color', 'rgb(153, 204, 153)')
//},
numberOfMonths: [3, 4],
//addDisabledDates: HolidayList,
addDates: getHolidays(),
beforeShowDay: function (date) {
// console.log('dateIn?', $.inArray(date, HolidayList));
if ($.inArray(date, HolidayList) !== -1) {
$("td").removeClass("ui-state-highlight");
return [true, "markDates" , "This is a holiiday"];
}
else {
return [true];
}
}
});
当我运行它然后检查突出显示的日期元素时,会发现以下内容:
<td class=" ui-state-highlight undefined " data-handler="selectDay" data-event="click" data-month="0" data-year="2016"><a class="ui-state-default" href="#">1</a></td>
为什么markDates未定义?我试过:
removeClass("ui-state-highlight").addClass("markDates")
具有相同的结果。
答案 0 :(得分:0)
它未定义,因为它在else
内点击了beforeShowDay
语句。此方法必须采用返回值的第二个索引,并将其用作日期项的类。将return [true];
更改为return [true, 'noMarkDates'];
会更正未定义的问题,但并未真正解决问题,因为我们确实希望突出显示特定日期。我认为这是HolidayList
的一个问题。 beforeShowDay
使用date
变量的日期对象。您正在尝试查看相同的日期对象是否在日期数组中。 (至少在我看来)由于格式不一致或日期对象中的信息太多而导致数据错误的可能性很大(日期对象包括小时,分钟,秒和毫秒,当你想要的只是日,月和年)。您可以先通过格式化日期来解决此问题。
beforeShowDay: function (date) {
// first get a consistent format for your date
var d = jQuery.datepicker.formatDate('mm-dd-yy', date);
// then compare it against an array of similarly formatted date strings
if ($.inArray(d, ["01-23-2016","03-17-2016","03-16-2016"]) !== -1) {
return [true, "markDates" , "This is a holiiday"];
}
else {
return [true, 'noMarkDates'];
}
}
结果是突出显示了正确的日期:https://jsfiddle.net/jmarikle/1gr6237q/1/
另外,请注意我使用了样式.markDates { background: red; }
。您的使用ID而不是类(.
和#
的差异)。请改用课程。
从此处获得formatDate
位:https://stackoverflow.com/a/28852510/854246