Forums

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?

I altered the JS code as follows to include an alert to show what each value is along the way:

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?