unable to increase hours using hour / minute by using up arrow icon

[shivamjjha]

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 full demo here
(helping a distant friend of mine, 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!!

PS: you can see this question on Stack Overflow also

[Eonasdan]

can you setup an minimal example based on this: https://stackblitz.com/edit/v4-minimum-setup

Also if this is a new project you should probably be using the v5 for which ever bootstrap version you're using. See https://getdatepicker.com/ for docs on that.

[shivamjjha]

Hey, man. Thanks for replying. I have my example here

But here I am not able to replicate this issue.
At that project; that is an old project. maybe you can have a look at that here

I am not getting man, that why it is not reproducible in stackblitz, but it is in that site.

Thanks

[shivamjjha]

Hi @Eonasdan . My issue is fixed. I was using on older v4, maybe that JS file was corrupted or something,

Now I am using this file; and it is working fine

https://github.com/Eonasdan/tempus-dominus/blob/v4/src/js/bootstrap-datetimepicker.js

THanks