HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Time Picker
A time picker component for picking a time of day.
Examples

HTML

<div id="timepicker"></div>
<div id="timepickerseconds"></div>

JavaScript

new hx.TimePicker('#timepicker')
new hx.TimePicker('#timepickerseconds', {showSeconds: true})
Api
Change Log
Prototypes
hx.TimePickerextendsEventEmitter
Used to create a timepicker from a selection.
Constructors
hx.TimePickerselectorString / HTMLElementoptionsObject
Creates a timepicker with the current time
Arguments
selectorString / HTMLElement
The selector of the div to turn into a time picker.
options
The options to use when creating the time picker.
Properties
buttonClassString
The class to add to the buttons.
dateDate
The date to initialise the time picker with
Default: new Date()
disabledBoolean
Whether the time picker should be disabled
Default: false
showSecondsBoolean
Whether to show the seconds in the timepicker.
Default: false
Events
change
Emitted when the time is changed.
hide
Emitted when the time picker is hidden.
show
Emitted when the time picker is shown.
Methods
dateDate
A function to return the currently selected date.
Returns
Date
datedateDateretainTimeBooleanTimePicker
Sets the currently selected date.
Arguments
dateDate
The date to set.
retainTimeBoolean
Whether the currently selected hours, minutes and seconds should be retained when setting the date of the time picker. Setting this to true will change the date value behind the scenes (and therefore the date returned from the time picker) but will not visually change the time picker.
Default: false
Returns
TimePicker
This TimePicker
disabledvalueBooleanTimePicker
A method for disabling or enabling a time picker
Arguments
valueBoolean
Whether the time picker should be disabled
Returns
TimePicker
This time picker
disabledBoolean
A method for getting the disabled state of a time picker
Returns
Boolean
Whether the button group is disabled
getScreenTimeString
Get the time as it is displayed in the input box. When using moment.js, this will include localised characters.
Returns
String
The the time as it is displayed in the input box.
hourNumber
A function to return the currently selected hour.
Returns
Number
hourhourNumberTimePicker
Sets the currently selected hour.
Arguments
hourNumber
The hour to set. Values accepted: 0 - 23. Passing in values outside this range will cause the TimePicker to cycle into the next/previous day.
Returns
TimePicker
This TimePicker
localelocaleStringTimePicker
A function for updating the locale used in the time picker.
By default, the locale used is 'en-gb' which cannot be changed unless moment.js with the relevant locales is present on the page. 
timepicker.locale('pl') // sets the timepicker's locale to Poland
Arguments
localeString
The locale string to update the time picker with.
Returns
TimePicker
This DatePicker
localeString
A method for getting the currently set locale
Gets the locale for this time picker. If one has not been set, falls back to
Returns
String
The currently set locale. Falls back to hx.preferences.locale() if one has not been set for this TimePicker
minuteNumber
A function to return the currently selected minute.
Returns
Number
minuteminuteNumberTimePicker
Sets the currently selected minute.
Arguments
minuteNumber
The minute to set. Values accepted 0 - 59. Passing in values outside this range will cause the TimePicker to cycle into the next/previous hour.
Returns
TimePicker
This TimePicker
secondNumber
A function to return the currently selected second.
Returns
Number
secondsecondNumberTimePicker
Sets the currently selected second.
Arguments
secondNumber
The second to set. Values accepted 0 - 59. Passing in values outside this range will cause the TimePicker to cycle into the next/previous minute.
Returns
TimePicker
This TimePicker
timezoneTimePicker
Sets the timezone for this TimePicker
Returns
TimePicker
This TimePicker
timezoneString
Gets the timezone for this TimePicker
Returns
String
The currently set timezone. Falls back to hx.preferences.timezone() if one has not been set for this instance
Functions
hx.timePickeroptionsObjectSelection
Creates a new TimePicker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing TimePicker
Returns
Selection
A selection containing an element with an TimePicker initialised on it