Skip to content Skip to sidebar Skip to footer

How To Get Datepicker To Be Highlighted Upon Refresh

I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes th

Solution 1:

You can use the defaultDate to set the initial date selected on the datepicker, and simulate a click event on the calendar to highlight the week:

var selectDate = '09/29/2011';

$('.week-picker').datepicker({
    defaultDate: selectDate
}).click(function(event) {
    // highlight the TR
    $(".ui-datepicker-current-day").parent().addClass('highlight');

    // highlight the TD > A
    $(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();

Example: http://jsfiddle.net/william/YQ2Zw/15/


Update

Assuming Datepicker.js is loaded in timesheet, you should be able to do that with two more lines:

window.onload = function getURL(){
    var url = document.location.href;
    urlSplit = url.split("/timesheet");

    if(urlSplit[1]== "")
    {
        var d = getMonday(new Date());

        dd = zeroPad(d.getDate(),2);
        mm = zeroPad(d.getMonth()+1,2);
        yy = d.getFullYear();

        document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
        //window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;

        $('.week-picker').datepicker({
            defaultDate: mm + '/' + dd + '/' + yy
        }).click();
    }
    else
    {
        week = url.split("week_commencing=");
        //return week[1];
        document.getElementById('startDate').innerHTML = week[1];
    }
}

Post a Comment for "How To Get Datepicker To Be Highlighted Upon Refresh"