Question

I have a jquery ui datepicker that highlights the week when i select a date. But because i am changing the URL location (to fit a parameter onto the end) the page refreshes and whatever i have clicked and highlighted is lost. I want to be able to click a date and when the page refreshes that week is highlighted. The week that needs to be highlighted can be taken from the URL so its just highlighting and highlighting after refresh that i need help with.

Heres the code:

$(function()
{
    var startDate;
    var endDate;
    var selectCurrentWeek = function()
    {
        window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
    }
    function check(d) {
        if(d.length() == 2) {
            dd = d;
            return dd;
        } else {
            dd = "0" + myDateParts[0];
            return dd;
        }
    }

    var selectedWeek;//remember which week the user selected here

    $('.week-picker').datepicker( {
        beforeShowDay: $.datepicker.noWeekends,
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = 'yy-mm-dd'
            var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));

            var oldDate = document.getElementById('startDate');
            var date_textnode = oldDate.firstChild;
            var date_text = date_textnode.data;
            myDateParts = date_text.split("-");

            var dd = myDateParts[2];

            var mm = myDateParts[1];

            var yy = myDateParts[0];

            selectCurrentWeek();

            window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;

        },
        beforeShowDay: function(date) {

            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });


    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });


});

thanks in advance

Answer 1

You can concat the chosen weekNumber in the URL. Then when the page reloads extract the parameter from the URL and load the date picker accordingly.