I use the calendar code below with a minor modification I made, anyway when I select a date, the calendar highlights the date selected which is great however when I pass this selected date and redirect url, the calendar looses that selected date and it is no longer highlighted on the next page, since I am already passing the variable, how can I edit the calendar code and pass it back the selected variable so that the selected date is known and highlighted on the calendar in next page (same calendar).
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div3_example"
});
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
if (obj.month.toString().length < 2) {
var date = obj.year + "-0" + obj.month + "-" + obj.day
//alert(date);
window.top.location.href = '..index.php?pDate=' + date;
}else
{
var date = obj.year + "-" + obj.month + "-" + obj.day
//alert(date);
window.top.location.href = '..index.php?pDate=' + date;
}
});
jsDatePick has a configuration option called selectedDate
that can be used to pre-select a date. We can parse the query string and feed that option at initialization.
Sadly, it turns out selectedDate
is buggy and will disable the date picker completely when used. There is a fix in 15437091/jsdatepick-using-a-selected-date in the answer of user Cesar referencing selectedDate - Problem im jsDatePick JavaScript - Modul (javascriptcalendar.org) (in german) that requires a modification of the source. But rather than do that, we can use some wrapping:
// duplicate original function
JsDatePick.prototype.setConfiguration_original = JsDatePick.prototype.setConfiguration;
// redefine function
JsDatePick.prototype.setConfiguration = function() {
// call original function
JsDatePick.prototype.setConfiguration_original.apply(this, arguments);
// use "selectedDate"
if(this.oConfiguration.selectedDate){
this.currentYear = this.oCurrentDay.year;
this.currentMonth = this.oCurrentDay.month;
this.currentDay = this.oCurrentDay.day;
this.selectedDayObject = this.oConfiguration.selectedDate;
this.flag_aDayWasSelected = true;
}
}
// parse query string for selected date
var pDate = location.search.match(/[\?&]pDate=(\d+)-(\d+)-(\d+)/);
pDate = pDate
? {year:parseInt(pDate[1]), month:parseInt(pDate[2]), day:parseInt(pDate[3])}
: null;
var g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
selectedDate: pDate,
target:"div3_example",
});