How to change default highlighted "today" date in datepicker

Question

I'm using datepicker for selecting dates in two date fields (from date and to date).

In those, the default highlighted date is today date. I need to change the default highlighted date to some other day in the second datepicker. (as a example today + 8 days).

How can I do this correctly ?

following are my datepickers,

$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); // ISO 8601
$( "#datepicker2" ).datepicker();
$( "#datepicker2" ).datepicker("option", "dateFormat", "yy-mm-dd");
});

Thanks.

---------------------------------- Update -----------------------------------------------

Following the screen shot for Michael,

Calender for two days after (today+2 days)

I put the following,

$( "#datepicker2" ).datepicker("option", "defaultDate", +2);

You can see still the 21 day (today) is Highlighting and 23 is bordered with black line. I need see 23 looks like 21 with hi lighting. No need to highlight 21.

possible duplicate: http://stackoverflow.com/questions/3829033/jquery-ui-datepicker-default-date?rq=1 — Sharlike, Feb 21 '13 at 14:55
Do you need to change the start date, or just change the end date depending on what start date the user selects? — j08691, Feb 21 '13 at 14:55
http://api.jqueryui.com/datepicker/#option-defaultDate setting default date option will highlight the date you want — Devjosh, Feb 21 '13 at 14:56

Michael Marr · Answer 1 · 2013-02-21T17:48:29.507

    $( "#datepicker" ).datepicker("option", "defaultDate", +8);

Source: http://api.jqueryui.com/datepicker/#option-defaultDate

EDIT: The current date will always be highlighted as part of the datepicker. There is no option to turn off this feature. It is to make clear to the user what "today" is. You can however override the graphical appearance of this w/ some CSS:

    .ui-datepicker-today a.ui-state-highlight {
        border-color: #d3d3d3;
        background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
        color: #555555;    
    }
   .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
        border-color: #aaaaaa;
        background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
        color: #212121;
    }

Working jsfiddle: http://jsfiddle.net/EpWud/

This assumes you're using the default theme - but you can do this same practice for any theme. Just override the styles like the code above. This CSS is incomplete, however. You'll need to make overrides for other cases, like the :hover state.

This is good. But the highlighted date is still today date. And the date for today+8 is bordered by black line. I need to change the default selected date from today date to today+8 date. — Chamith Malinda, Feb 21 '13 at 15:05
Can you post some screenshots of what it is doing and what you want it to do. I think there is confusion in what you're actually asking. — Michael Marr, Feb 21 '13 at 15:10
@MichaelMarr I tried to do it in jQuery and ended up with css like yours. — Praveen, Jun 07 '13 at 09:01

score 1 · Answer 2 · edited May 23 '17 at 10:29

A small tweak to the selected answer in jQuery UI DatePicker change highlighted "today" date

// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow

// Pass the today date to datepicker
$( "#datepicker" ).datepicker({
    showButtonPanel: true,
    localToday: localToday    // This option determines the highlighted today date
});

I've overridden 2 datepicker methods to conditionally use a new setting for the "today" date instead of a new Date(). The new setting is called localToday.

Override $.datepicker._gotoToday and $.datepicker._generateHTML like this:

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}

Here's a demo which shows the full code and usage: http://jsfiddle.net/NAzz7/5/

This answer involves deep analysis! – prem Feb 26 '17 at 12:22 — prem, Feb 26 '17 at 12:22

jdp · Answer 3 · 2017-05-27T14:50:01.097

I wasn't happy with how the UI Core displays the defaultDate with that flimsy border and all. After much trial and error, I added a focus method to the second datepicker and used the setDate method.

$('#datepicker2').datepicker().focus(function(){
   $(this).datepicker('setDate',+2);
});

This will give you the selected date with a background color based on the theme and today will also retain it's background when the datepicker opens. The only downside here is if you don't wind up selecting a date from the datepicker, you've got to go back in and clear the input field.

Seems like a bit of a hash as I generally don't like using the focus method but I'm sticking with it.

score 0 · Answer 4 · answered Jun 26 '17 at 20:59

0

This is possible by changing the variable under _generateHTML in jquery-ui.js

today = this._daylightSavingAdjust(
                new Date("Your Date Here") ), // clear time

answered Jun 26 '17 at 20:59

Greg Ford

1

score 0 · Answer 5 · answered Oct 19 '17 at 12:25

Use onSelect option. It should looks like this:

$('#datepickerID').datepicker({
                    onSelect: function(dateText, inst) {
                        $('#ui-datepicker-div').addClass("calendar-piced");
                    },
                    showButtonPanel: true,
                    gotoCurrent: true
                });

#datepickerID{
    &.calendar-piced{
        .ui-datepicker-today{
            a{
                background: #f6f6f6;
                border: 1px solid #c5c5c5;
                color: #454545;
            }
        }
    }
}

In 'onSelect' is defined function that will be called when a date is selected. After select of some date, I add class for wrapper of datepicer. Then with css/sass change style for link in — 0smir, Oct 19 '17 at 12:33

score 0 · Answer 6 · answered Jun 12 '18 at 14:01

Another solution to highlight the defaultDate is to override a CSS class which corresponds to the chosen defaultDate:

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}

Demo jsfiddle: http://jsfiddle.net/0vjadze4/ (highlight both today and defaultDate)

Of course, you can combine that with the answer provided by Mickael, to highlight only defaultDate:`

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}
.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
    color: #555555;    
}
.ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
    border-color: #aaaaaa;
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    color: #212121;
}

Demo jsfiddle: http://jsfiddle.net/43svpe80/1/ (highlight only defaultDate)

How to change default highlighted "today" date in datepicker

6 Answers6

Linked

Related