CODEWITHSUNDEEP
javascriptjquerydatetimepickertimepicker
squeekyDave
squeekyDave

Reputation: 962

Two instances of jQuery timepicker

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/

Upvotes: 0

Views: 728

Answers (3)

dave
dave

Reputation: 64657

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"/>

Upvotes: 2

MattjeS
MattjeS

Reputation: 1397

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 (e.g. 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

Upvotes: 0

Angel Garcia
Angel Garcia

Reputation: 1577

try i intstead of m on your second function.

i.e

$('#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

Upvotes: 0

Related Questions