I have a text field that currently displays today's date along with a calendar icon. When the icon is clicked, a datepicker pops up with today's date preselected. What I'm trying to achieve is to have the datepicker open on a future date like 12/03/2012 when the calendar icon is clicked.
I can actually see the upcoming dates in my JSON response within Firebug:
[{"date":"01/05/2012","available":true},{"date":"05/05/2012","available":true}]
However, I'm struggling with how to refresh or update the calendar to display these forthcoming dates upon clicking the calendar icon.
Below is the code for my datepicker:
// 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 function triggered by the datepicker on "beforeShow" is as follows:
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 within 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);
}
});
Apologies for including so much code, but I'm really stuck on this issue :(