Uncaught TypeError: Cannot read property 'forceRoundTime' of undefined

[petehannam]

When selecting a time drop the drop-down, the following error is thrown in the JS console:

jquery.timepicker.js?ver=1.11.12:362 
Uncaught TypeError: Cannot read property 'forceRoundTime' of undefined
    at w.fn.init.setTime (jquery.timepicker.js?ver=1.11.12:362)
    at w.fn.init.$.fn.timepicker (jquery.timepicker.js?ver=1.11.12:1283)
    at Object.updateTime (jquery.datepair.min.js?ver=0.4.16:7)
    at f._setTimeAndReturn (jquery.datepair.min.js?ver=0.4.16:7)
    at f._timeChanged (jquery.datepair.min.js?ver=0.4.16:7)
    at f.handleEvent (jquery.datepair.min.js?ver=0.4.16:7)
    at HTMLDivElement.i (jquery-3.3.1.min.js?ver=3.3.1:2)
    at HTMLDivElement.dispatch (jquery-3.3.1.min.js?ver=3.3.1:2)
    at HTMLDivElement.y.handle (jquery-3.3.1.min.js?ver=3.3.1:2)
    at Object.trigger (jquery-3.3.1.min.js?ver=3.3.1:2)

It only happens the first time. If I click again it works. I've tried messing around with having the timepicker script register later in the DOM lifecycle but it didn't have an effect.

The HTML is:

<input type="text" id="shift-start" value="10:00" class="form-control time start ui-timepicker-input" autocomplete="off" aria-describedby="shiftStartAddOn">
<div class="input-group-append" id="shiftStartAddOn">
  <span class="input-group-text" id="shiftStartAddOn"><i class="far fa-clock"></i></span>
</div>

And the JS:

$('#shift-start').timepicker({
      'showDuration': false,
      'timeFormat': 'H:i',
      'minTime' : '10:00',
      'maxTime' : '22:00',
      'show2400' : true,
      'step' : 15,
      'forceRoundTime' : false
    });

I've also tried not setting options, and it seems to happen regardless.