CODEWITHSUNDEEP
jqueryjquery-uidatepicker
user3442612
user3442612

Reputation: 1822

Always highlight today in datepicker

I was wondering if there was a way to always highlight today in datepicker, even if using beforeshowday and beforeshowday sets today as false.

For example:

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,'',''];
    }
},

If today manages to fall under a non-selectable day, the style is overwritten. How would I preserve the style while still making it non-selectable?

Thanks.

Edit:

I was able to check for today, but the suggested style only changes the outline of the day cell. I tried to add the multiple style classes found for the today cell, but the greyed out style still seems to override the today highlight style. 

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,'',''];
    }
}

Upvotes: 1

Views: 616

Answers (1)

Christof Baumgartner
Christof Baumgartner

Reputation: 83

Not the final answer, but maybe this helps you. The today is highlighted by this class 

ui-state-highlight

The code in the jqueryui responsible for this is

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

Upvotes: 2

Related Questions