eonasdan bootstrap: unable to increase hours using hour arrow icon

Question

I am using Eonasdan datetimepicker version : 4.17.47 by importing this JS file in a project.

Also, I am using some custom validation to make sure that shows a red text when the user enters a time range different than expected. I am no setting minDate or maxDate because the time range is dynamic and can be changed.

Sometimes though, the user is unable to increment hours / minutes by clicking on the up arrow key. The datetimepicker is set to use for only time, thus initialized as:

$("#timePicker").datetimepicker({
        format: "LT",
        allowInputToggle: true,
        keepInvalid: true // the up arrow icon was not working, so I thought this will fix it but it didn't
      });

and the template:

<div class="form-group col-sm-6 time-block">
   <div class="control input-group customtextInput" id="timePicker">
      <input type="text" id="stime" name="time" class="inputText col-md-12 form-control time-picker"
         data-bind="event:{ blur: function (data, event) {$parent.handleDateTimeOnblur.bind(data, $parent, event)() } }"
         required />
      <span class="input-group-addon">
         ...
      </span>
   </div>
   <p class="text-danger login-error-msg time-empty" id="time-error" aria-label="Error Message"
      data-bind="text: $parent.timeErrorMessage()" role="alert"></p>
</div>

You can see a demo here

I've noticed that when user tries to go to next date using the datetimepicker, it stops incrementing, (The date pickers on this given page are not connected, they are seperately initialized.)

Any help regarding this will be truly appreciated!!

Answer 1

This issue us fixed now. See Discussion on GitHub