Two instances of jQuery timepicker

jquery datepicker
how to use multiple datepicker in jquery
multiple date selection in jquery datepicker
jquery datepicker onselect
multiple datepicker bootstrap
two datepicker in one form bootstrap
jquery datepicker format
jquery datepicker default date

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/

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

JQuery Datepicker on multiple instances, Since you have dynamic element for datepicker try below. $(document).ready( function() { $(document).on('focus','.datepicker', function()  jQuery Timepicker is a plugin to help users easily input time entries. It can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it. Also, if writing is not your thing, you can also choose time entries from a dropdown of options.

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

jQuery Timepicker, jQuery Timepicker is a plugin to help users easily input time entries. need to include two files: jquery.timepicker.min.js and jquery.timepicker.min.css . To get a list of all avaiable versions and files, go to https://cdnjs.com/libraries/timepicker. If you set it to decade, it shows years. And if you set it to century, it shows decades. Navigating by month is practical if you are using the picker for something like a hotel reservation. You might navigate by year, decade, or century if the picker is used to search for historical data over a long time span.

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

Unable to use multiple datepicker instances, Hi, I've been unsuccessfully trying to get the datepicker to work on multiple instances on the same form. Head: The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.

How to use multiple JQuery UI Date Picker or Datepicker in HTML or , By using JQuery UI and some help from CSS ID and class selector, we can easily use multiple date pickers in one HTML page. All you need to do  At this point, the 2 instances are bound correctly (clicking in the text boxes shows the timepicker controls). The PROBLEM occurs when the user clicks a link which invokes javascript to create a third instance. At this point, clicking in any of the 3 text boxes does NOT show timepicker controls. The Javascript looks like this.

Timepicker for jQuery – Demos and Documentation, You can optionally set an maxTime as well. $('#durationExample').timepicker({ '​minTime': '2:  A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. Add a user-friendly javascript timepicker dropdown to your app in minutes.

Apply jQuery datepicker to multiple instances – echo $BRAIN_STUFF, To add multiple instance of jQuery datepicker (or timepicker), it is possible to use class instead of the ID to initialize the widget in particular  There is a similar question Multiple dynamic instances of bootstrap-timepicker , but i hav already done what the answer suggested Answer 1 Because of the first $.each loop all elements from the DOM will be removed, So, whatever the binding tho those elements will not work.

Comments
  • You'll probably need to link to the timepicker library you are using if you want to get any help
  • @dave I have put a link, hope that helps.
  • According to the docs this plugin uses the same format as PHP's date() function, and there m means "Numeric representation of a month, with leading zeros"
  • No, sorry, it doesnt work, the values now appear to be the letter "i".
  • @squeekyDave hmm I see. I'll keep trying.
  • I tried with "i", it just shows the letter "i", even escaping the letter still shows the letter.