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
Date Time Picker
A combined date/time picker component, for selecting both date and time at the same time.
Examples

HTML

<div id="dateTimePickerExample"></div>

JavaScript

new hx.DateTimePicker('#dateTimePickerExample')
Api
Change Log
Prototypes
hx.DateTimePickerextendsEventEmitter
A class used to combine a date picker and a time picker so that they work toghether.
Constructors
hx.DateTimePickerselectorString / HTMLElementoptionsObject
Creates a datepicker and a timepicker and appends them to the selected element.
Arguments
selectorString / HTMLElement
The selector to use to build the date/time picker
options
The options to use when setting up the date/time picker.
Properties
dateDate
The date to initialise the date/time picker with
Default: new Date()
datePickerOptions
The options to use for the date picker.
See the Date Picker module for information about the available options.
The selectRange option is ignored when using a date/time picker.
disabledBoolean
Whether the date time picker should be disabled
Default: false
timePickerOptions
The options to use for the time picker.
See the Time Picker module for information about the available options.
Events
changeDate
Emitted when the date or time is changed. The data sent with the event is the currently selected date.
change
date.change
Emitted when the date is changed.
date.change
Emitted when the date is changed.
Properties
typeString
The type of event that fired the change. Can be 'user' (when the user clicks something to change the date) or 'api' (when a method call is used to change the api.)
date.hide
Emitted when the date picker is hidden.
date.show
Emitted when the date picker is shown.
time.change
Emitted when the time is changed.
time.change
Emitted when the time is changed.
Properties
typeString
The type of event that fired the change. Can be 'user' (when the user clicks something to change the time) or 'api' (when a method call is used to change the api.)
time.hide
Emitted when the time picker is hidden.
time.show
Emitted when the time picker is shown.
Methods
dateDate
A function to return the currently selected date.
Returns
Date
datedateDateretainTimeBooleanDateTimePicker
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
DateTimePicker
This DateTimePicker
dayNumber
A function to return the currently selected day of the month.
Returns
Number
daydayNumberDateTimePicker
A function used to set the currently selected day.
Arguments
dayNumber
The day to set.
Returns
DateTimePicker
This DateTimePicker
disabledvalueBooleanDateTimePicker
A method for disabling or enabling a date time picker
Arguments
valueBoolean
Whether the date time picker should be disabled
Returns
DateTimePicker
This date time picker
disabledBoolean
A method for getting the disabled state of a date time picker
Returns
Boolean
Whether the button group is disabled
getScreenDateString
Gets the concatenated date/time string, as shown in the input fields. When using moment.js, this will include localised characters.
Returns
String
getScreenTimeString
Get the time as it is displayed in the timepicker input box. When using moment.js, this will include localised characters.
Returns
String
hourNumber
A function to return the currently selected hour.
Returns
Number
hourhourNumberDateTimePicker
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
DateTimePicker
This DateTimePicker
localelocaleStringDateTimePicker
A function for updating the locale used in the datetimepicker.
By default, the locale used is 'en-gb' which cannot be changed unless moment.js with the relevant locales is present on the page. 
datetimepicker.locale('pl') // sets the datetimepicker's locale to Poland
Arguments
localeString
The locale string to update the datetimepicker with.
Returns
DateTimePicker
This DateTimePicker
localeString
A method for getting the currently set locale.
Returns
String
The currently set locale.
minuteNumber
A function to return the currently selected minute.
Returns
Number
minuteminuteNumberDateTimePicker
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
DateTimePicker
This DateTimePicker
monthNumber
A function to return the currently selected month.
Returns
Number
monthmonthNumberDateTimePicker
Sets the currently selected month.
Arguments
monthNumber
The month to set.
Returns
DateTimePicker
This DateTimePicker
secondNumber
A function to return the currently selected second.
Returns
Number
secondsecondNumberDateTimePicker
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
DateTimePicker
This DateTimePicker
timezoneDateTimePicker
Sets the timezone for this DateTimePicker
Returns
DateTimePicker
This DateTimePicker
timezoneString
Gets the timezone for this DateTimePicker
Returns
String
The currently set timezone. Falls back to hx.preferences.timezone() if one has not been set for this instance
yearNumber
A function to return the currently selected year.
Returns
Number
yearyearNumberDateTimePicker
Sets the currently selected year.
Arguments
yearNumber
The year to set.
Returns
DateTimePicker
This DateTimePicker
Functions
hx.dateTimePickeroptionsObjectSelection
Creates a new DateTimePicker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing DateTimePicker
Returns
Selection
A selection containing an element with an DateTimePicker initialised on it