Parsed date is incorrect if date format is different from default 'F j, Y'

[cla-memento]

Hi,
I've tried doing two different tests after changing the input control value property to "28/02/2015"(value="28/02/2015").
-I changed the dateformat in js to'd/m/Y '
-I explicitly call the dateformat ' {dateFormat: 'd/m/Y '} ' as an option in html

The control returns the date 02/04/2017.

I'm trying to figure out what doesn't work.

[joshsalverda]

Hi @cla78,

This is unfortunately due to the way Date.parse works in JavaScript 😞

It only accepts dates in the ISO 8601 formats: http://www.w3.org/TR/NOTE-datetime

Snippet from that page:

Year:
YYYY (eg 1997)
Year and month:
YYYY-MM (eg 1997-07)
Complete date:
YYYY-MM-DD (eg 1997-07-16)
Complete date plus hours and minutes:
YYYY-MM-DDThh:mmTZD (eg 1997-07-16T19:20+01:00)
Complete date plus hours, minutes and seconds:
YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
Complete date plus hours, minutes, seconds and a decimal fraction of a
second
YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)

I was investigating a way to parse the dates correctly a little while ago, but I haven't had a lot of free time lately to investigate further. Libraries like http://momentjs.com/ can do it, so for sure a custom parsing method can be created... Just need time to write it.

[cla-memento]

Hi,
i have modified your script to correct the issue.

I've added this piece of code

Date.prototype.dateLoad = function(format,dataora,check,dt_part)
{
    var maxhh = (check==false);

    if(!dt_part) {dt_part = ''};

    var CFORMAT_YEAR = "Yy";
    var CFORMAT_MONTH = "mn";
    var CFORMAT_DATE = "jd";
    var CFORMAT_HOUR = "GHgh";
    var CFORMAT_MINUTE = "i";
    var CFORMAT_HOUR_SEP = ",.:"    
    var CFORMAT_DATE_SEP = "/." 

    format = format + "";
    dataora = dataora + "";
    var i_format=0;
    var i_dataora=0;
    var c="";
    var token="";
    var result = null;
    var bad = 0;
    var hd_sep=""; 

    var value = new Object();

    value['Y'] = "";
    value['y'] = "";
    value['n'] = "";
    value['m'] = "";
    value['F'] = "";
    value['M'] = "";
    value['j'] = "";
    value['d'] = "";
    value['D'] = "";
    value['l'] = "";
    value['G'] = "";
    value['H'] = "";
    value['g'] = "";
    value['h'] = "";
    value['a'] = "";    
    value['i'] = "";
    value['s'] = "";

    var y=this.getFullYear();
    var M=this.getMonth()+1;
    var d=this.getDate();
    var H=0;  // this.getHours();
    var m=0;  // this.getMinutes();

    while (i_format < format.length) {
        token = format.charAt(i_format++);
        c=format.charAt(i_format++);

        hd_sep = ""; 
        if (CFORMAT_YEAR.indexOf(token)>=0 || CFORMAT_MONTH.indexOf(token)>=0 || CFORMAT_DATE.indexOf(token)>=0) hd_sep = hd_sep + CFORMAT_DATE_SEP;
        if (CFORMAT_HOUR.indexOf(token)>=0 || CFORMAT_MINUTE.indexOf(token)>=0) hd_sep = hd_sep + CFORMAT_HOUR_SEP;


        while (('0123456789'.indexOf(dataora.charAt(i_dataora))>=0) && (i_dataora < dataora.length)) {
            value[token] += dataora.charAt(i_dataora++);
        }

         nella stringa 
        if (i_dataora<dataora.length && hd_sep.indexOf(dataora.charAt(i_dataora))<0) {
            bad = 1;
            break;
        }

        if (value[token]!='') {
            if (CFORMAT_YEAR.indexOf(token) >= 0) {y = parseInt(value[token],10);}          
            if (CFORMAT_MONTH.indexOf(token) >= 0) {M = parseInt(value[token],10);}
            if (CFORMAT_DATE.indexOf(token) >= 0) {d = parseInt(value[token],10);}
            if (CFORMAT_HOUR.indexOf(token) >= 0) {H = parseInt(value[token],10);}
            if (CFORMAT_MINUTE.indexOf(token) >= 0) {
                m = parseInt(value[token],10);
                if (value[token].length < 2) m = m * 10; 
            }
        }

        c = dataora.charAt(i_dataora++);

    }

    if (bad==0) {

        //construct the result data
        if (y > 50 && y < 100) {y = y + 1900};
        if (y <= 50) {y = y + 2000};
        M = M - 1;

        switch (dt_part)
        {
            case 'Y':
                result = y;
                break;
            case 'M':
                result = M;
                break;
            case 'D':
                result = d;
                break;
            case 'H':
                result = H;
                break;
            case 'm':
                result = m;
                break;
            default :       
                if (maxhh) {H = this.getHours();}  

                result = new Date(y,M,d,H,m,0);


                i_format = y - result.getFullYear();
                i_format += M - result.getMonth();
                i_format += d - result.getDate();
                i_format += H - result.getHours();
                i_format += m - result.getMinutes();

                if (i_format!=0) {result = null}; 
        }   
    }

    return result;
};

I've changed the init function by this way:

if (self.element.value) 
{
  parsedDate = currentDate.dateLoad(self.config["dateFormat"], self.element.value);
  //parsedDate = Date.parse(self.element.value);
}

Anyway, I hope I have been helpful.

😄

[nikkilocke]

A simpler work round for this problem is to supply the date value in ISO format (Y-m-d), and to add 2 lines of code to reformat the date during init:

        self.currentMonthView = date.current.month.integer();
        self.currentDayView = date.current.day();
    }
+    var currentTimestamp = new Date(self.currentYearView, self.currentMonthView, self.selectedDate.day).getTime();
+    self.element.value = formatDate(self.config.dateFormat, currentTimestamp);

    wrap();
    buildCalendar();

+1 This is causing problems here in California (UTC–8, –7 DST).

Please see new PR to incorporate this fix: #21

[sumit784]

Here is the simplest hack, which works for me. You do not need to change any code in the lib. Just use this wherever you are using the date.
Keep the date format separated by slash(/) because as per Javascript document the dash(-) separated values are preferred as ISO formats. Read this :-

The ISO 8601 syntax (YYYY-MM-DD) is also the preferred JavaScript date format:

Refer here :- http://www.w3schools.com/js/js_date_formats.asp

So, use the slash seprated format :-
Eg :-
datepickr('#newDueDate', {
dateFormat: 'Y/m/d',
});

Here is rest of the code for geting the correct time :-

var givenDueDate = document.getElementById('newDueDate').value;

var newDueDate = new Date(givenDueDate);

If you have the date separeted by dash(-) or dot (.), then use the replace function.
Here is the example for replacing dash.

dueDate = dueDate.replace(/-/g,"/");

Now you can do this to get the correct date time.

var newDueDate = new Date(dueDate );

This will give you the exact correct date, picking from your browser and locale.

@nikkilocke Sir, you solution doesn't works, because "self.selectedDate.day" is coming as null and script initlization itself is failing.

[marketinview]

In case this is still of use to anyone...I also had an issue with the @nikkilocke fix. It made the result consistent, but it was still wrong (e.g., If I picked the 21st, I'd get the 20th). It is due to how JavaScript date functions handle ISO dates and time zones. As @sumit784 pointed out, the JavaScript date functions work when the date has /'s instead of -'s. I still needed the date in YYYY-MM-DD format. Modifying one line in the datepickr script fixed it:

//parsedDate = Date.parse(self.element.value);  //original line
parsedDate = Date.parse(self.element.value.replace(/-/g, '\/'));  //new line