CFv5 Datepicker field On Selected JS Function Issue

Ma

MainsailSoftware 10 Feb, 2015

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?

Ma

MainsailSoftware 11 Feb, 2015

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?

Ma

MainsailSoftware 11 Feb, 2015

Answer

I was able to resolve the issue with the following Load JavaScript code modification:


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"!

Forums

CFv5 Datepicker field On Selected JS Function Issue