如何在刷新时突出显示日期选择器

Question

我有一个日期选择器，可以突出显示选定的一周。它正在使用 ajax 请求。这是我遇到问题的地方。当我选择一周，即 29/08/11 并且页面刷新时，突出显示的一周不再突出显示。

Datepicker.js

$(function()
{
    var startDate;
    var endDate;
    var selectCurrentWeek = function()
    {
        window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
    }
    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; << 

在上面的这一点上，这是刷新窗口并获取 URL 的地方。这样当我选择一个日期时，它会输出如下http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05

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


});

index.html.erb

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;
    }
    else
    {
        week = url.split("week_commencing=");
        //return week[1];
        document.getElementById('startDate').innerHTML = week[1];
    }
}

注意 window.onload URL 函数获取从 url 开始的星期

Jsfiddle - 包括日期选择器

http://jsfiddle.net/YQ2Zw/12/

更新

Answer 1

您可以使用defaultDate 设置在日期选择器上选择的初始日期，并在日历上模拟click 事件以突出显示星期：

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();

示例：http://jsfiddle.net/william/YQ2Zw/15/

---

更新

假设 Datepicker.js 在 timesheet 中加载，您应该可以再添加两行代码：

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