Jquery日期选择器,我如何设置未来的日期

Jquery datepicker, how can I set future date

本文关键字:日期 设置 未来 何设置 选择器 Jquery      更新时间:2023-09-26

我有一个显示今天日期的文本框和一个日历图标,当单击该图标时,会打开一个选择了今天日期的日期选择器。我希望日期选择器在以后的某个日期打开,即2012年3月12日,当您单击日历图标时。

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

[{"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);                                
        }
    });

很抱歉粘贴了这么多代码,但我束手无策:(

您可以通过在beforeShow事件上调用jQueryUI Calendar的setDate方法来实现这一点。

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"。它应该适用于美国和英国的地区。

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

  1. 这个

    var dd=新日期()
    alert("正要从数组中获取日期")
    dd=_gDatePickerCalendar.availDays[0];

这将永远无法确保dd是Date对象。C#和JavaScript中的var不同


你离这里很近,只是有点耐心:)