I have the following Load JavaScript JS code in the Setup portion of a CFv5 form:
Date.prototype.dbFormat = function() {
var yyyy = this.getFullYear().toString();
// getMonth() is zero-based
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) +
"-" + (dd[1]?dd:"0"+dd[0]);
};
function setEndDate() {
var d = new Date(jQuery("#start_date").val());
d.setDate(d.getDate() + 1);
jQuery("#end_date").val(d.dbFormat());
}
setEndDate is the value of On date selected in the Datepicker field configuration.
On setting my Start Date field, the End Date field is updated as follows:
[attachment=0]Datepicker JS Off-By-One Issue.PNG[/attachment]
Although the Datepicker chooses 2015-06-12 and properly updates Start Date, the incremented date then placed in End Date show the same date. And if I actually do not add 1 to the date, but simply have it use the Date created by new Date(jQuery("#start_date").val()) the date that ends up in End Date is one day less!
Maybe this is just my lack of experience with JavaScript Dates, but this is really wrong and strange.
I have seen elsewhere, where it is recommended to use functions on a jQuery datepicker to parse and manipulate Dates, but I am pretty new to jQuery and do not have a clue as the appropriate way to get the date properly incremented by a defined number of days.
Can you point me to or provide any examples of the best and most appropriate ways to do this with the CFv5 datetimepicker fields?
Date.prototype.dbFormat = function() {
var yyyy = this.getFullYear().toString();
// getMonth() is zero-based
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) +
"-" + (dd[1]?dd:"0"+dd[0]);
};
function setEndDate() {
var d = new Date(jQuery("#start_date").val());
d.setDate(d.getDate() + 1);
jQuery("#end_date").val(d.dbFormat());
}
setEndDate is the value of On date selected in the Datepicker field configuration.
On setting my Start Date field, the End Date field is updated as follows:
[attachment=0]Datepicker JS Off-By-One Issue.PNG[/attachment]
Although the Datepicker chooses 2015-06-12 and properly updates Start Date, the incremented date then placed in End Date show the same date. And if I actually do not add 1 to the date, but simply have it use the Date created by new Date(jQuery("#start_date").val()) the date that ends up in End Date is one day less!
Maybe this is just my lack of experience with JavaScript Dates, but this is really wrong and strange.
I have seen elsewhere, where it is recommended to use functions on a jQuery datepicker to parse and manipulate Dates, but I am pretty new to jQuery and do not have a clue as the appropriate way to get the date properly incremented by a defined number of days.
Can you point me to or provide any examples of the best and most appropriate ways to do this with the CFv5 datetimepicker fields?
I altered the JS code as follows to include an alert to show what each value is along the way:
This results in the following alert content being displayed:
[attachment=0]CFv5 JS Datepicker Alert.PNG[/attachment]
The Datepicker seems to be returning the correct date string to the date field, but the new Date( <date field string> ) seems to create a Date that does not make sense (my local date time was around 8:50am Feb 10 2015 EST). The Linux server is in EST, but I think it is configured to GMT. Joomla is configured for EST.
Any suggestions?
Date.prototype.dbFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) +
"-" + (dd[1]?dd:"0"+dd[0]);
};
Date.prototype.addDays = function(days) {
return this.setDate(this.getDate() + days);
}
function setEndDate() {
var dStr = jQuery("#start_date").val();
var d = new Date(dStr);
var newDStr = d.toString();
d.addDays(1);
var d1Str = d.toString();
var d1DbStr = d.dbFormat();
jQuery("#end_date").val(d.dbFormat());
alert("start=" + dStr + "\nnew date=" + newDStr +
"\nd1Str=" + d1Str + "\nd1DbStr=" + d1DbStr);
}
This results in the following alert content being displayed:
[attachment=0]CFv5 JS Datepicker Alert.PNG[/attachment]
The Datepicker seems to be returning the correct date string to the date field, but the new Date( <date field string> ) seems to create a Date that does not make sense (my local date time was around 8:50am Feb 10 2015 EST). The Linux server is in EST, but I think it is configured to GMT. Joomla is configured for EST.
Any suggestions?
I was able to resolve the issue with the following Load JavaScript code modification:
By appending " 00:00:00" to the passed in date in format yyyy-mm-dd, the parsed date is now correct. Evidently, the Date() constructor needs the time portion to properly parse the passed date string (i.e., "2015-06-05 00:00:00" to get "Fri Jun 5 2015 00:00:00 GMT -0400 (Eastern Daylight Time)" whereas passing "2015-06-05" results in "Thu Jun 4 2015 20:00:00 GMT -0400 (Eastern Daylight Time)" being parsed). I tested this issue in multiple browsers and it seems like it is a JavaScript Bug or "feature"!
Date.prototype.dbFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) +
"-" + (dd[1]?dd:"0"+dd[0]);
};
Date.prototype.addDays = function(days) {
return this.setDate(this.getDate() + days);
}
function setEndDate() {
var date =
new Date(jQuery("#start_date").val() + " 00:00:00");
date.addDays(2);
jQuery("#end_date").val(date.dbFormat());
}
By appending " 00:00:00" to the passed in date in format yyyy-mm-dd, the parsed date is now correct. Evidently, the Date() constructor needs the time portion to properly parse the passed date string (i.e., "2015-06-05 00:00:00" to get "Fri Jun 5 2015 00:00:00 GMT -0400 (Eastern Daylight Time)" whereas passing "2015-06-05" results in "Thu Jun 4 2015 20:00:00 GMT -0400 (Eastern Daylight Time)" being parsed). I tested this issue in multiple browsers and it seems like it is a JavaScript Bug or "feature"!
This topic is locked and no more replies can be posted.