CODEWITHSUNDEEP
jquerydatepicker
Chamith Malinda
Chamith Malinda

Reputation: 4529

How to change default highlighted "today" date in datepicker

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.

Upvotes: 6

Views: 46879

Answers (6)

Pierre
Pierre

Reputation: 2944

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)

Upvotes: 0

0smir
0smir

Reputation: 1

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;
            }
        }
    }
}

Upvotes: 0

Greg Ford
Greg Ford

Reputation: 1

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

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

Upvotes: 0

jdp
jdp

Reputation: 366

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.

Upvotes: 0

Cory Danielson
Cory Danielson

Reputation: 14501

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/

Upvotes: 1

Michael Marr
Michael Marr

Reputation: 2099

    $( "#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.

Upvotes: 5

Related Questions