JQuery Datepicker Date highlight Issue
- by Isola Olufemi
I have an in-line date picker in which I want to highlight some dates based on array of strings from the server side.
I found out the on load of the page with the datepicker, events the matches in the current month will not be highlighted. when I click the next month button the events on the next moth will be highlighted.
What I discovered that i the matching only get highlighted when I click to the next month and not when I click back to the previous month.
Below is my script:
var actionCalDates = new Array();
function getDates(month, year) {
$.ajax({
url: "/Index/GetAllAlerts",
data: {
month: month,
year: year
},
success: function (result) {
var date = new Date();
var i = new Number(date.getMonth());
i += 1;
actionCalDates = result.split(",");
}
});
}
function getTitle(ar, d) {
var result = "";
for (var i = 0; i < ar.length; i++) {
if (ar[i].indexOf(d) != -1) {
var e = actionCalDates[i].split(";");
result += e[0] + "\n";
}
}
return result;
}
$('#calendar').datepicker({
numberOfMonths: [1, 1],
showCurrentAtPos: 0,
dateFormat: 'dd/mm/y',
beforeShowDay: function (thedate) {
var theday = thedate.getDate();
var x = new Number(thedate.getMonth());
x += 1;
var date = thedate.getDate() + "/" + x + "/" + thedate.getFullYear();
getDates(x, thedate.getFullYear());
for (var i = 0; i < actionCalDates.length; i++) {
var entry = actionCalDates[i].split(";");
if (date == entry[1]) {
return [true, "highlight", getTitle(actionCalDates, date)];
}
}
return [true, "", ""];
},
onChangeMonthYear: function (year, month, inst) {
getDates(month, year);
},
onSelect: function (d, instance) {
$.ajax({
url: '/Index/AlertConvertDate',
datatype: 'text',
data: { dateString: d },
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
alert(thrownError);
},
success: function (data) {
window.SetHomeContent(data);
}
});
}
});
Please can someone point out where I went wrong?
Thank you all.
