Two instances of jQuery timepicker

Question

I have tow different jQuery functions, one is for hours and the other one for minutes.

$('#hour_timepicker').timepicker({
    timeFormat: 'h',
    interval: 1,
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

The code above works perfectly well. However my next function, which has to show the minutes does not work,

$('#minute_timepicker').timepicker({
    timeFormat: 'm',
    interval: 10,
    dynamic: true,
    dropdown: true,
    scrollbar: true
});

No matter what value I select from the minute_timepicker, it shows completey random numbers.

Here are the inputs aswell:

<label id="hour_timepicker_label">Slect time</label>
<input id="hour_timepicker" type="text"/>
<label>:</label>
<input id="minute_timepicker" type="text"/>

Can anyone help please? Thank you.

Link to timepicker library: http://jonthornton.github.io/jquery-timepicker/

Answer 1

I think the issue is that this library isn't really designed to pick the minutes seperately, if you had to do it you would need to set the step to 60 for hour (so it will only show in one hour increments), and then for the minutes you would need to restrict it to only show some arbitrary hour so it won't repeat, and then set the step to 10 so it will show in 10 minute increments.

$('#hour_timepicker').timepicker({
    timeFormat: 'H',
    interval: 1,
    step: 60,
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

$('#minute_timepicker').timepicker({
    timeFormat: 'i',
    step: 10,
    dynamic: true,
    dropdown: true,
    scrollbar: true,
    minTime: '12:00am',
    maxTime: '12:59am'
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.timepicker.min.js"></script>


<label id="hour_timepicker_label">Slect time</label>
<input id="hour_timepicker" type="text"/>
<label>:</label>
<input id="minute_timepicker" type="text"/>