JQuery DatePicker, как я могу установить будущую дату - PullRequest
1 голос
/ 12 марта 2012

У меня есть текстовое поле, в котором отображается текущая дата, и значок календаря, при нажатии которого открывается средство выбора даты с выбранной текущей датой.Я хочу, чтобы средство выбора даты открывалось в будущем, т.е. 12/03/2012, когда вы щелкаете значок календаря.

Я могу видеть будущие даты в моем ответе json в firebug -

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

JavaScript, которыйвызывается для datepicker "beforeShow" - это -

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

это вызов ajax в методе GetAvailability

$.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);                                
        }
    });

Извините за вставку такого большого количества кода, но я в своем уме(

1 Ответ

0 голосов
/ 12 марта 2012

Этого можно добиться, вызвав метод setDate в Календаре jQueryUI для события 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);

И, пожалуйста, передайте это из вашего серверного метода как «гг / мм / дд». Это должно работать для США и Великобритании.

2, что это? setTimeout('$("#ui-datepicker-div")', 800);. Подпись setTimeout https://developer.mozilla.org/en/DOM/window.setTimeout

  1. А это

    var dd = new Date ();
    alert («Просто собираюсь получить дату из массива»);
    dd = _gDatePickerCalendar.availDays [0];

Это никогда не гарантирует, что dd является объектом Date. var в C # и JavaScript отличаются <Ч /> Вы очень близко, просто немного терпения:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...