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/timepicker@1.11.14/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/timepicker@1.11.14/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"/> 

Answer 2

try i intstead of m on your second function.

ie

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

sorry if this doesn't work.

I'm suggesting this because on the documentation, it has this:

$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });

H -> hours , i -> minutes and s -> seconds

Answer 3

Based on the documentation for that library, the timeFormat is defined as:

timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax . Characters can be escaped with a preceeding double slash (eg H\\hi). Alternatively, you can specify a function instead of a string, to use completely custom time formatting. In this case, the format function receives a Date object and is expected to return a formatted time as a string. default: 'g:ia'

and the PHP formatting syntax for minutes is i