HexagonJS
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
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
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
A function to return the currently selected day of the month.
Returns
daydayNumberDateTimePicker
A function used to set the currently selected day.
Arguments
The day to set.
Returns
DateTimePicker
This DateTimePicker
disabledBoolean
A method for getting the disabled state of a date time picker
Returns
Whether the button group is disabled
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
getScreenDateString
Gets the concatenated date/time string, as shown in the input fields. When using moment.js, this will include localised characters.
Returns
getScreenTimeString
Get the time as it is displayed in the timepicker input box. When using moment.js, this will include localised characters.
Returns
hourNumber
A function to return the currently selected hour.
Returns
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
localeString
A method for getting the currently set locale.
Returns
The currently set locale.
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
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
minuteNumber
A function to return the currently selected minute.
Returns
monthNumber
A function to return the currently selected month.
Returns
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
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
The currently set timezone. Falls back to hx.preferences.timezone() if one has not been set for this instance
yearyearNumberDateTimePicker
Sets the currently selected year.
Arguments
yearNumber
The year to set.
Returns
DateTimePicker
This DateTimePicker
yearNumber
A function to return the currently selected year.
Returns
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