今天总是在datepicker中突出显示

时间:2016-09-20 22:14:50

标签: jquery jquery-ui datepicker

我想知道今天是否总有一种方法可以在datepicker中突出显示,即使使用beforeshowday和beforeshowday今天设置为false。

例如:

beforeShowDay: function(date) {
    // make days selectable or not
    if($.inArray($.datepicker.formatDate('yy-mm-dd', date), non_project_dates) > -1) {
        return [false,'',''];
    }
    else {
        return [true,'',''];
    }
},

如果今天设法落入不可选择的日期,则样式将被覆盖。如何在保持不可选择的同时保留风格?

感谢。

修改:

我今天能够查看,但建议的样式只会更改日期单元格的轮廓。我试图添加为今天单元格找到的多个样式类,但灰色样式似乎仍然覆盖今天的高亮样式。

beforeShowDay: function(date) {
    // make days selectable or not 
    if ( $.datepicker.formatDate('yy-mm-dd', calendar_start_date) == $.datepicker.formatDate('yy-mm-dd', date) ) {
        console.log("Matched today.");
        return [false,'ui-state-highlight',''];
    }
    else if($.inArray($.datepicker.formatDate('yy-mm-dd', date), non_project_dates) > -1) {
        return [false,'',''];
    }
    else {
        return [true,'',''];
    }
}

1 个答案:

答案 0 :(得分:2)

不是最终答案,但也许这会对你有所帮助。今天这个类突出了

ui-state-highlight

负责此操作的jqueryui中的代码是

tbody += "<td class='" +
                            ((dow + firstDay + 6) % 7 >= 5 ? " ui-datepicker-week-end" : "") + // highlight weekends
                            (otherMonth ? " ui-datepicker-other-month" : "") + // highlight days from other months
                            ((printDate.getTime() === selectedDate.getTime() && drawMonth === inst.selectedMonth && inst._keyEvent) || // user pressed key
                            (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ?
                            // or defaultDate is current printedDate and defaultDate is selectedDate
                            " " + this._dayOverClass : "") + // highlight selected day
                            (unselectable ? " " + this._unselectableClass + " ui-state-disabled": "") +  // highlight unselectable days
                            (otherMonth && !showOtherMonths ? "" : " " + daySettings[1] + // highlight custom dates
                            (printDate.getTime() === currentDate.getTime() ? " " + this._currentClass : "") + // highlight selected day
                            (printDate.getTime() === today.getTime() ? " ui-datepicker-today" : "")) + "'" + // highlight today (if different)
                            ((!otherMonth || showOtherMonths) && daySettings[2] ? " title='" + daySettings[2].replace(/'/g, "&#39;") + "'" : "") + // cell title
                            (unselectable ? "" : " data-handler='selectDay' data-event='click' data-month='" + printDate.getMonth() + "' data-year='" + printDate.getFullYear() + "'") + ">" + // actions
                            (otherMonth && !showOtherMonths ? "&#xa0;" : // display for other months
                            (unselectable ? "<span class='ui-state-default'>" + printDate.getDate() + "</span>" : "<a class='ui-state-default" +
                            (printDate.getTime() === today.getTime() ? " ui-state-highlight" : "") +
                            (printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "") + // highlight selected day
                            (otherMonth ? " ui-priority-secondary" : "") + // distinguish dates from other months
                            "' href='#'>" + printDate.getDate() + "</a>")) + "</td>"; // display selectable date