JavaScript Time Picker Builder

Steps

Step 1 of 7: Input and Placement

OptionValueDescription
input: Is the time picker associated with an input field?
Enter the input field ID. If you want to use drop down select menus (Full version only), enter two or IDs separated by a comma in the following order [HOUR,MINUTE,AMPM] (e.g. my_hour_sel,my_minute_sel,my_ampm_sel) - AMPM is optional and if is not defined the hour format will be 24 hours.
object: If you don't want to use an input (or want to set the time picker in a specific location), enter the HTML Element ID that will hold the time picker.
You can leave this empty.
visible: Do you want the time picker to be visible all the time, or when the user focuses on the input field?
If the time picker is visible, we recommend setting the object variable, otherwise the time picker will be placed on the bottom of the page.
placement: Where do you want the time picker to show relative to the input box?
Leave empty for default value (depending on input field position on the screen and language)
offset: Do you want to offset the time picker from the input field? Enter the X and Y offset separated by a comma (e.g. 5,5)
This will only take effect when the visible option is set to false
close_on_select: Do you want to close the time picker after the user select a minute?
Selecting an hour doesn't close the time picker regardless, only selecting a minute is effected by this option.
 

 
Your Time Picker
Demo: