我在样式标记中放置了一个HTML类定义,然后在beforeShowDay中使用它并且它是未定义的

时间:2016-01-19 15:13:57

标签: javascript jquery-ui-datepicker

我有以下内容:

$("<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") 

具有相同的结果。

1 个答案:

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