javascript - Jquery datepicker，如何设置 future 日期

Question

我有一个显示今天日期的文本框和一个日历图标，单击该图标时会打开一个日期选择器，其中选择了今天的日期。我希望当您单击日历图标时，日期选择器在未来的日期(即 2012 年 12 月 3 日)打开。

我可以在 firebug 的 json 响应中看到 future 的日期 -

[{"date":"01/05/2012","available":true},{"date":"05/05/2012","available":true}]

但是当单击日历图标时，如何刷新/重绘日历以显示这些日期。

这是我的日期选择器

// Load the Datepicker options    
$(document).ready(function(){        
    $('#<%= ViewData.Model.name %>_DatePickerCalendar_<%= ViewData.Model.sector      %>').datepicker({
        changeYear: true,
        changeMonth: true,
        clearText: '',
        closeText: '',
        currentText: '',
        prevText: '«',
        nextText: '»',
        dateFormat: 'dd/mm/yy',         
        firstDay: 1,
        numberOfMonths: 2,
        minDate: 0,
        <% if(Model.name == "Flight") { %>
            maxDate: '+16m',
        <% } else { %>
            maxDate: new Date(<%=Model.maxDate.Year %>, <%=Model.maxDate.Month %> - 1,        <%=Model.maxDate.Day %>),
        <% } %>
        mandatory: true,
        showOn: 'both', 
        buttonImage: '/images/icons/ico-calendar.gif', 
        buttonImageOnly: true,
        buttonText: 'view calendar',
        changeFirstDay: false,            

            var date = new Date();
            if (sDate.value != "") 
                date = $.datepicker.parseDate('dd/mm/yy', sDate.value); 
            cbBeforeShow(date, '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>', '<%= ConfigurationSettings.AppSettings["FutureAvailabilityYears"]%>');                               
        },
        beforeShowDay: cbCheckDayAvailable,            
        onChangeMonthYear: function(year, month, inst) {
            <%--/*
                When displaying multiple months with a set maxDate setting, and you   select the last month
                datepicker shows the max month last, this causes GetAvailability to not query the correct months
                changing the selected month to the previous means the correct availability is retrieved
            */--%>
            if (typeof inst.settings.maxDate === "object" &&
                month == (inst.settings.maxDate.getMonth() + 1) && 
                year == inst.settings.maxDate.getYear()) {
                month--;
            } 
            cbChangeMonthYear(year, month, '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>', '<%= ConfigurationSettings.AppSettings["FutureAvailabilityYears"]%>')
        },                        
    <% } else { %>

        beforeShowDay: function(sDate) {
            cbCheckGreaterThanDateOut('<%= ViewData.Model.name %>'); 
        },
        beforeShowDay: function() {
            return [true, _gDatePickerCalendar.availDayClass ]
        },            
        onChangeMonthYear: null,

    <% } %>

        onClose: function(sDate) {
            cbOnClose('<%= ViewData.Model.name %>', '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>');
        },              
        onSelect: function(sDate) {                
            cbOnSelect(sDate, '<%= ViewData.Model.name %>', <%= ViewData.Model.sector %>);                
        },
        defaultDate: new Date('15 October 2012')       
    });       
});

在日期选择器“beforeShow”上调用的 javascript 是 -

function cbBeforeShow(dDate, model, sector, futureAvailabilityMonths) {        

    _gDatePickerCalendar.GetAvailability(dDate, null, null, sector);
    setTimeout('$("#ui-datepicker-div")', 800);
    //checkForEmptyAvailabilityForMonth(dDate, null, null, model, sector, futureAvailabilityMonths);            
    $('#ui-datepicker-div').show();          
}

这是 GetAvailability 方法中的 ajax 调用

$.ajax({
        url: _gDatePickerCalendar.availUrl,
        dataType: "json",
        async: false,
        success: function(data) {
            $.each(data, function(i, item) {
                if (item.date != "") {

                    var date = new Date(item.date.substring(6, 10), item.date.substring(3, 5) - 1, item.date.substring(0, 2));
                    _gDatePickerCalendar.availDays[i] = date;
                }
            });
        },
        complete: function() {
            var dd = new Date();
            alert("Just about to get a date from the array");
            dd = _gDatePickerCalendar.availDays[0];
            alert(dd);                                
        }
    });

抱歉粘贴了这么多代码，但我已经束手无策了:(

Answer 1

您可以通过调用 setDate 来实现此目的jQueryUI Calendar 的 beforeShow 事件的方法如下。

beforeShow: function(input, inst) { 
    $(this).datepicker( "setDate" , new Date('01-01-2013'));
}

工作示例:http://jsfiddle.net/7HLn7/

<小时/> 更新:

这些都不正确

1, var date = new Date(item.date.substring(6, 10), item.date.substring(3, 5) - 1, item.date.substring(0, 2) )); 应该只是

var date = new Date(item.date);

请从您的服务器方法将其作为“yy/mm/dd”传递。它应该适用于美国和英国的语言环境。

2、这是什么？ setTimeout('$("#ui-datepicker-div")', 800);. setTimeout的签名是https://developer.mozilla.org/en/DOM/window.setTimeout

还有这个

var dd = new Date();
alert("即将从数组中获取日期");
dd = _gDatePickerCalendar.availDays[0];

这永远无法确保 dd 是 Date 对象。 var in C# and JavaScript are different

<小时/> 你已经很接近了，只是需要一些耐心:)