jQuery DateTimePicker is subtracting one hour on input blur

Question

I'm having a strange annoying issue.

This jQuery DateTimePicker is subtracting 1 hour on input blur.

Look closely... Select a date and then a time. It will behave correctly until you focus out the input field.

I can't figure out...

Here is a CodePen for you to play with. The CDNs used are from here.

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  step:15
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">

Answer 1

Here's an open issue on project GitHub repository: Format "m/d/Y h:i a" changes hour onBlur #596 https://github.com/xdan/datetimepicker/issues/596

btw, there is a workaround

$('#start').datetimepicker({
  format:"Y-m-d H:i A",
  validateOnBlur: false,
  step:15
});

Answer 2

The reason for this behaviour was caused by a to show PM/AM in this format:

"Y-m-d h:i:m a"

When I set:

validateOnBlur:false

The time was not changed anymore. Or you can also remove a out of this format-definition.

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  //format:"Y-m-d h:i", // or use it without a or A for PM/AM
  step:15,
  validateOnBlur:false
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">

Answer 3

So this worked for me:

$('#datetimepicker').datetimepicker({
  step: 15,
  format:"Y-m-d h:i a",
  validateOnBlur: false,
})

However, this still seems like a bug that needs to be addressed, but this may help you in the meantime. This will allow for invalid times if a user changes the time in between when they use the date picker and when they focus off the input.

Working snippet here:

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  step:15,
  validateOnBlur: false,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">