Date dropdown

Examples

Basic

PreviewAngularReactVueJavaScript

With user defined range options

PreviewAngularReactVueJavaScript

API

Properties

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

Default:

''

ghost

Button with no background or outline

Attribute:

ghost

Type:

boolean

Default:

false

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'

loading

Loading button

Attribute:

loading

Type:

boolean

Default:

false

locale

Since 2.6.0

Locale identifier (e.g. 'en' or 'de').

Attribute:

locale

Type:

string ｜ undefined

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

Default:

''

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

Default:

''

outline

Outline button

Attribute:

outline

Type:

boolean

Default:

false

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

Default:

''

variant

Button variant

Attribute:

variant

Type:

"danger" ｜ "primary" ｜ "secondary"

Default:

'primary'

weekStartIndex

Since 2.6.0

The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.

Attribute:

week-start-index

Type:

number

Default:

0

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; }