Skip to main content

Date Dropdown

Usage​

PreviewAngularReactVueJavascript

with user defined range options​

PreviewAngularReactVueJavascript

Properties​

Props​

Name
Description and specifications
customRangeAllowed
Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date ranges are available for selection.
Attribute:
custom-range-allowed
Type:
boolean
Default:
true
dateRangeId
Used to set the initial select date range as well as the button name, if not set or no according date range label is found, nothing will be selected
Attribute:
date-range-id
Type:
string
Default:
'custom'
dateRangeOptions
An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object. Example format: { id: 'some unique id', label: 'Name of the range', from: undefined, to: '2023/03/29' }, // ... other predefined date range options ...
Type:
DateDropdownOption[]
Default:
[]
disabled
Since 2.3.0
Disable the button that opens the dropdown containing the date picker.
Attribute:
disabled
Type:
boolean
Default:
false
format
Date format string. See
Attribute:
format
Type:
string
Default:
'yyyy/LL/dd'
from
Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected. Format is based on `format`
Attribute:
from
Type:
string
i18nCustomItem
Text for custom dropdown item. Will be used for translation.
Attribute:
i18n-custom-item
Type:
string
Default:
'Custom...'
i18nDone
Text for the done button. Will be used for translation.
Attribute:
i18n-done
Type:
string
Default:
'Done'
i18nNoRange
Text for the done button. Will be used for translation.
Attribute:
i18n-no-range
Type:
string
Default:
'No range set'
maxDate
The latest date that can be selected by the date picker. If not set there will be no restriction.
Attribute:
max-date
Type:
string
minDate
The earliest date that can be selected by the date picker. If not set there will be no restriction.
Attribute:
min-date
Type:
string
range
If true a range of dates can be selected.
Attribute:
range
Type:
boolean
Default:
true
to
Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null` Format is based on `format`
Attribute:
to
Type:
string

Events​

Name
Description and specifications
dateRangeChange
EventEmitter for date range change events. This event is emitted when the date range changes within the component. The event payload contains information about the selected date range.
Detail:
{ id: string; from: string; to: string; }