Jquery datepicker, how can I set future date

Question

I have a textbox that shows todays date and a calendar icon that when clicked opens up a datepicker with todays date selected. I want the datepicker to open at a future date i.e. 12/03/2012 when you click the calendar icon.

I can see the future dates in my json response in firebug -

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

But how can I refresh/redraw the calendar to display these dates when the calendar icon is clicked.

Here is my datepicker

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

The javascript that is called on datepicker "beforeShow" is -

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

this is the ajax call in the GetAvailability method

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

Sorry for pasting so much code, but I'm at my wits end :(

I've got the date now - document.getElementById('??????').value = date; How can I set the value attribute in this code, because the id attribute is dynamically generated. Many thanks — user548489, Mar 13 '12 at 22:47

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You could achieve this by calling the setDate method of jQueryUI Calendar on the beforeShow event like this.

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

Working example: http://jsfiddle.net/7HLn7/

Update:

These are not correct

1, ~~var date = new Date(item.date.substring(6, 10), item.date.substring(3, 5) - 1, item.date.substring(0, 2));~~ It should be just

var date = new Date(item.date);

And please pass that from your server method as 'yy/mm/dd'. It should work for US and UK locales.

2, Whats this? setTimeout('$("#ui-datepicker-div")', 800);. The signature of setTimeout is https://developer.mozilla.org/en/DOM/window.setTimeout

And this

var dd = new Date();
alert("Just about to get a date from the array");
dd = _gDatePickerCalendar.availDays[0];

This will never ensure that dd is a Date object. var in C# and JavaScript are different

You are very near, just some patience :)

edited May 23 '17 at 12:05

Community

1
1

answered Mar 12 '12 at 13:21

naveen

53,448
46
161
251

Hi Naveen, thanks for your response. When I click on the icon in your example the calendar still shows 12/03/2012. The textbox shows the correct date but the calendar itself doesn't. – user548489 Mar 12 '12 at 13:51
please try after removing the `defaultDate` in your javascript – naveen Mar 12 '12 at 14:16
Naveen, the code is the same as in the original post excluding the line - defaultDate: new Date('15 October 2012') – user548489 Mar 12 '12 at 15:57

Jquery datepicker, how can I set future date

1 Answers1