Format "m/d/Y h:i a" changes hour onBlur

[Sparkmasterflex]

I've recently upgraded to v2.5.4 and am now using the npm package and a strange bug has popped up that I cannot find any reason for. When the user selects a time and date the plugin populates the proper time/date in the input but when they click outside that input the time changes to an hour earlier.

I've changed the format to have no space between the time and the "AM" or "PM" and instead of changing the hour it changes from "PM" to "AM", every time.

Here's the code:

$('input.select-datetime').datetimepicker({
  format: "m/d/Y h:i a",
  formatTime: 'h:i a',
  formatDate: 'm/d/Y',
  step: 15,
  style: "min-width: 310px",
  onShow: function(current, $input) {
    var arr, date, options;
    if ($input.data('year') != null) {
      options = {};
      arr = $input.data('date').split('-');
      date = (arr[0] + "/" + (arr[1] - 1)) || "12/01";
      if ($input.data('year').min != null) {
        $.extend(options, {
          minDate: "-" + (1970 - $input.data('year').min) + "/" + date
        });
      }
      if ($input.data('year').max != null) {
        $.extend(options, {
          maxDate: "+" + (1970 + $input.data('year').max) + "/" + date
        });
      }
      return this.setOptions(options);
    }
  }
});

I've tried taking out the onShow and changing the formatTime/Date. The only thing that works is taking out the format option but this uses/inserts European format which does not work for my situation.

[leather-s]

This seems like a big issue. Im having the same problem. I would like to see this solved

[leather-s]

set option validateOnBlur to false.
.datetimepicker({
validateOnBlur: false,
format:'Y-m-d h:i A',
formatTime: 'g:i A'
});

[Sparkmasterflex]

@leather-s I ended up having to downgrade the package to 2.5.3 to get it to work again. I know that's probably not the answer you're looking for. It definitely wasn't the one I wanted but it works

[Thomo87]

I think the issue is in the DateFormatter, not specifically this function.

I downloaded the latest dateformatter code and replaced it in jquery.datetimepicker.full.js and the issue was resolved. There's a -1 in the current part of the JS that causes the issue but removing it causes issues with the meridiam flipping when you have 12 hour time and select midday or midnight.

Update the dateformatter code and it should be resolved, it's minified at the top of the final js file, but not listed in the codebase of this functionality.

[Sparkmasterflex]

@Thomo87 do you mean this package? https://github.com/xdan/datetimepicker/blob/master/package.json#L37

Would adding this with the proper version trickle down into this package you think?

[Thomo87]

@Sparkmasterflex yeah that's the one.

[Sparkmasterflex]

That appears to be the latest version of that package. I just upgraded to version 2.5.11 and I'm still getting this issue.

I was satisfied with staying at 2.5.3 but I'm now seeing this error #612 and it turns out that somebody fixed it and the PR was merged in later versions of this package.

[Thomo87]

I just downloaded the latest, and the issue is still present.

I ran a compare between the minified file from php-date-formatter git and the details in the latest version of the datetimepicker, and they differ.

I've attached them for reference, but it looks like it's not pulling the latest details correctly.

I've included the full js that I've tested and is working, the latest full js that I download directly from Git about 10 minutes ago, and the php-min file that I grabbed from their Git which has been manually included in the working full.

DateTimePicker.zip

[dsnopek]

I'm also seeing this. The root of the problem appears to be that npm install is pulling the wrong version of php-date-formatter which is missing this commit:

kartik-v/php-date-formatter@7e5fa68

It's super confusing, because the version in node_modules/php-date-formatter is labeled as 1.3.4 (the latest version) but isn't actually. I think probably the upstream maintainer started using the 1.3.4 version number in the source right after 1.3.3 was released, and what we're getting in node_modules is an earlier git commit.

Running these commands, gets me the proper version of php-date-formatter:

npm install
rm -rf node_modules/php-date-formatter/
(cd node_modules && wget https://github.com/kartik-v/php-date-formatter/archive/v1.3.4.tar.gz && tar -xzvf v1.3.4.tar.gz && rm v1.3.4.tar.gz && mv php-date-formatter-1.3.4 php-date-formatter)

And then I can rebuild via npm run build and everything starts working fine!

I really don't know how to make npm install get the right version which would be the right fix... I'll leave that to someone more knowledgeable!

[Sarke]

Another workaround is to use Moment.JS as the formatter:

jQuery.datetimepicker.setDateFormatter({
	parseDate: function (date, format) {
		var d = moment(date, format);
		return d.isValid() ? d.toDate() : false;
	},
	formatDate: function (date, format) {
		return moment(date).format(format);
	}
});

[Sparkmasterflex]

I haven't had any luck with any fixes or workarounds so I've actually just have my company's app locked at 2.5.3 and started building my own in React.

It's getting close but not quite ready, if anyone's interested in forking or following the project. Since the app it's going to live in isn't a React app, but includes quite a few React components it's built to allow usage w/o requiring ReactDom in your JS app

https://github.com/Sparkmasterflex/tzolkin

[lriggle-strib]

@Thomo87 is right, the issue is in the DateFormatter. Specifically this part:

f=t(h,p.meridiem[0])?0:t(h,p.meridiem[1])?12:-1,s>=1&&12>=s&&f>-1?y.hour=s+f-1:s>=0&&23>=s&&(y.hour=s);

That snippet checks to see if am/pm is used, and if it is converts to 12 hour time (if it isn't already).

Here's the whole (broken) chunk for the hour evaluation (I added in line breaks/spaces to make it easier to read):

case"g":
case"h":
    if (c = n.indexOf("a") > -1 ? n.indexOf("a") : n.indexOf("A") > -1 ? n.indexOf("A") : -1, h = a[c], c > -1) f = t(h, p.meridiem[0]) ? 0 : t(h, p.meridiem[1]) ? 12 : -1, s >= 1 && 12 >= s && f > -1 ? y.hour = s + f - 1 : s >= 0 && 23 >= s && (y.hour = s); else {
        if (!(s >= 0 && 23 >= s)) return null;
        y.hour = s
    }
    m = !0;
    break;

I "fixed" it locally just to see if I could pin point the exact part, this is what i ended up with. It's a bit rough but it doesn't screw up the time on blur.

case"g":
case"h":
    c = -1;
    //Find out where the meridian is, if there is one.
    if ( n.indexOf('a') > -1 || n.indexOf('A') > -1 ) {
        if ( n.indexOf('a') > -1 ) {
            c = n.indexOf('a');
        }
        else {
            c = n.indexOf('A');
        }
    }

    if ( c > -1 ) {
        //h is the meridian
        h = a[c];

        //If we're using a meridian, find out the hour offset
        f = t(h, p.meridiem[0]) ? 0 : t(h, p.meridiem[1]) ? 12 : -1;

        //Return if we have garbage data for the hour
        if (!(s >= 0 && 23 >= s)) return null;

        //Set existing value for hour
        y.hour = s;

        //Adjust hour if it's necessary
        if ( f > -1 ) {
            if ( f >= 12 ) {
                y.hour -= 12;
            }
        }
    }
    
    m = !0;
    break;

I haven't tried to forcibly upgrade my php-date-formatter package yet to see if that magically makes the existing logic work, that's going to be my next step.

[dsnopek]

@lriggle-strib Forcing a proper upgrade of php-date-formatter does fix it - the logic there was rewritten in kartik-v/php-date-formatter@7e5fa68

[achchu93]

@leather-s Many thanks! your solution worked for me. simple!