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 Picker
A component for picking dates.
Examples

HTML

<div id="datepickerExample1"></div> <div id="datepickerExample2"></div>

JavaScript

new hx.DatePicker('#datepickerExample1');
new hx.DatePicker('#datepickerExample2', {type: 'datepicker'});

HTML

<div id="dateRangePicker"></div>

JavaScript

new hx.DatePicker('#dateRangePicker', {selectRange: true});

HTML

<input id="datePickerInput" />

JavaScript

new hx.DatePicker('#datePickerInput');

HTML

<input id="datePickerV2" placeholder="DD/MM/YYYY" />

JavaScript

new hx.DatePicker('#datePickerV2', {
  v2Features: {
    dontModifyDateOnError: true,
    displayLongMonthInCalendar: true,
    dontSetInitialInputValue: true,
    updateVisibleMonthOnDateChange: true,
  },
});
Api
Change Log
Prototypes
hx.DatePickerextendsEventEmitter
The date picker can be used to create an interactive dropdown to let the user select a date.
Constructors
hx.DatePickerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The selector to use to build the date picker
options
The options to use when setting up the datepicker.
Properties
allowInbuiltPickerBoolean
Whether to allow the inbuilt datepicker for touch devices. Generally this should be allowed as the inbuilt picker is generally more suited to the device.
Default: true
allowViewChangeBoolea
Whether to allow the user to 'zoom out' to display the year / decade selectors
Default: true
closeOnSelectBoolean
Supply true to close the calendar when a date is selected. False will keep the calandar view open when a date is selected.
Default: true
dateDate
The date to initialise the date picker with
Default: new Date()
defaultViewString
The default view to use when using the date picker. Can be 'm' for month view, 'y' for year view or 'd' for decade view.
Default: 'm'
disabledBoolean
Whether the date picker should be disabled
Default: false
range
An object containing the date range to set. The start/end dates will be sorted internally if the end date is before the start date.
Properties
endDate
The second date of the range
startDate
The first date of the range
selectRangeBoolean
Set to true to allow the selection of a date range. If this is set to true, the type is set to 'calendar' and showTodayButton is set to false as these properties cannot be used when in range selection mode.
Default: false
showTodayButtonBoolean
Whether to show the 'today' button when using the date picker. The today button allows the user to select today regardless of what view they are currently in.
Default: true
typeString
The type of date picker to show, can be either 'datepicker' or 'calendar'
Default: 'calendar'
v2Features
An object containing flags to toggle features that will be standard in version 2
outputFullDateBoolean
Whether the date should include the time information as it was passed in or return with setHours(0,0,0,0) applied
dontModifyDateOnErrorBoolean
The current behaviour modifies the date when there is a problem with the input value to attempt to display a valid date.
This behaviour will be removed in V2 and will instead only show a validation error.
Default: false
displayLongMonthInCalendarBoolean
Modifies the display text in the calendar to use the long month name (i.e. January 1970 instead of Jan / 1970)
Default: false
dontSetInitialInputValueBoolean
Does not set the initial value of the date picker input
Default: false
updateVisibleMonthOnDateChangeBoolean
Updates the visible month when setting the date value with the API
Default: false
dateValidityCallbackvalidBooleanvalidityEnumString
The function that is called when validating the date and using an <input /> element as the container for the date picker.
This function is only used when also using dontModifyDateOnError: true
Simple validation 
const input = hx.select('input#myInput')

new hx.DatePicker(input, {
  dateValidityCallback: (valid) => {
    input.node().setCustomValidity(valid ? '' : 'Please enter a valid date')
  }
})
Range validation 
const input = hx.select('input#myInput')

new hx.DatePicker(input, {
  validRange: {
    start: new Date(...),
    end: new Date(...),
  },
  dateValidityCallback: (valid, validityEnum) => {
    let message;
    switch(type) {
      case 'INVALID_DATE':
        message = 'Please enter a valid date'
        break;
      case 'DATE_OUTSIDE_RANGE_START':
      case 'DATE_OUTSIDE_RANGE_END':
        message = 'Please enter a date inside the valid range'
        break;
      default:
        message = '';
    }
    input.node().setCustomValidity(message)
  }
})
Arguments
validBoolean
Whether the entered date is valid. The validity can be false when the date entered is invalid or when it is outside the valid range.
The validEnum argument can be used to distinguish between types
validityEnumString
A string indicating the type of validation failure that occurred.
This can be one of:
  • 'INVALID_DATE' - Caused by the user entering a value that cannot be converted to a date
  • 'DATE_OUTSIDE_RANGE_START' - Caused when using the validRange option and the date is earlier than the start of the valid range
  • 'DATE_OUTSIDE_RANGE_END' - Caused when using the validRange option and the date is later than the end of the valid range
validRange
An object containing the valid range to set. The start/end dates will be sorted internally if the end date is before the start date.
Properties
endDate
The second date of the valid range. Dates before this point will be selectable.
startDate
The first date of the valid range. Dates after this point will be selectable
Events
change
Emitted when the date is changed.
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.)
hide
Emitted when the date picker is hidden.
show
Emitted when the date picker is shown.
Methods
dateDate
A function to return the current date
Returns
Date
datedateDateDatePicker
A function used to set the currently selected date.
Arguments
dateDate
The date to set.
Returns
DatePicker
This DatePicker
dayNumber
A function to return the currently selected day of the month.
Returns
Number
daydayNumberDatePicker
A function used to set the currently selected day.
Arguments
dayNumber
The day to set.
Returns
DatePicker
This DatePicker
disabledvalueBooleanDatePicker
A method for disabling or enabling a date picker
Arguments
valueBoolean
Whether the date picker should be disabled
Returns
DatePicker
This date picker
disabledBoolean
A method for getting the disabled state of a date picker
Returns
Boolean
Whether the button group is disabled
getScreenDateString
Gets the date string as shown in the datepicker input. When using moment.js, this will include localised characters.
Returns
String
hideDatePicker
Hides the datepicker dropdown
Returns
DatePicker
This DatePicker
localelocaleStringDatePicker
A function for updating the locale used in the date 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. 
datepicker.locale('pl') // sets the datepicker's locale to Poland
Arguments
localeString
The locale string to update the date picker with.
Returns
DatePicker
This DatePicker
localeString
A method for getting the currently set locale.
Returns
String
The currently set locale.
monthNumber
A function to return the currently selected month.
Returns
Number
monthmonthNumberDatePicker
Sets the currently selected month.
Arguments
monthNumber
The month to set. The value is 1-based (e.g. 1 = January).
Returns
DatePicker
This DatePicker
rangeObject
A function to return the selected date range when the selectRange argument was passed into the constructor.
Returns
Object
Properties
endDate
The end date of the range
startDate
The start date of the range
rangerangeObjectdontSetupInputBooleanDatePicker
A method for setting the selected date range when the selectRange argument was passed into the constructor.
When providing dates, the order of the dates is not relevant. The date picker will decide which is the start and which is the end date and set the range accordingly.
Arguments
range
An object containing the date range to set. The start/end dates will be sorted internally if the end date is before the start date.
Properties
endDate
The second date of the range
startDate
The first date of the range
dontSetupInputBoolean
A value used to prevent the input being changed
Default: false
Returns
DatePicker
This DatePicker
showDatePicker
Shows the datepicker dropdown
Returns
DatePicker
This DatePicker
validRangerangeObjectDatePicker
Sets the range in which dates can be selected. For calendar pickers, this will grey out any dates that are outside the range. For datepickers, this will prevent the dates from being entered or selected with the up/down buttons. 
datepicker.validRange({start: new Date}); // User can select any date after today
datepicker.validRange({start: undefined, end: new Date()}); // User can select any date before today
datepicker.validRange({start: new Date(), end: new Date()}); // User can only select today
datepicker.validRange({}); // Clear valid range (all dates are valid)
Arguments
range
The range to set.
Properties
endDate
The end date for the range. Use undefined to clear the end date for the range. If this value isn't supplied, then the end of the valid range will not be affected.
startDate
The start date for the range. Use undefined to clear the start date for the range. If this value isn't supplied, then the start of the valid range will not be affected.
Returns
DatePicker
This DatePicker
validRangeObject
Gets the currently set valid range for this date picker.
Returns
Object
The range
Properties
endDate
The end date for the valid range. Will be set to undefined if no end date has been set.
startDate
The start date for the valid range. Will be set to undefined if no start date has been set.
visibleMonthmonthNumberyearNumberDatePicker
A function used to show the month specified without affecting the date selection
Arguments
monthNumber
The month to set. The value is 1-based (e.g. 1 = January).
yearNumber
The year to show. This value will default to the currently set year if no year is provided.
Returns
DatePicker
This DatePicker
visibleMonthObject
A function used to show the month specified without affecting the date selection
Returns
Object
Properties
monthNumber
The month set. The value is 1-based (e.g. 1 = January).
yearNumber
The year set.
yearNumber
A function to return the currently selected year.
Returns
Number
yearyearNumberDatePicker
Sets the currently selected year.
Arguments
yearNumber
The year to set.
Returns
DatePicker
This DatePicker
Functions
hx.datePickeroptionsObjectSelection
Creates a new DatePicker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing DatePicker
Properties
v2Features
Properties
useInputBoolean
A boolean to toggle the use of an <input> instead of a <div> for the node to apply the datepicker to.
Returns
Selection
A selection containing an element with an DatePicker initialised on it