Skip to main content

Date picker

Examples​

Basic​

PreviewAngularReactVueJavaScript

Single Selection​

PreviewAngularReactVueJavaScript

Translation​

The ix-date-picker can be configured using BCP 47 locale strings specifying the language to use generating or interpreting strings. More information can be found here

PreviewAngularReactVueJavaScript

API​

Properties​

Name
Description and specifications
corners
Corner style
Attribute:
corners
Type:
"left" ｜ "right" ｜ "rounded" ｜ "straight"
Default:
'rounded'
eventDelimiter
Since 1.1.0
Deprecated
Not used anymore see `this.dateChange`
Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter
Attribute:
event-delimiter
Type:
string
Default:
' - '
format
Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
Attribute:
format
Type:
string
Default:
'yyyy/LL/dd'
from
Since 1.1.0
The selected starting date. If the date-picker-rework is not in range mode this is the selected date. Format has to match the `format` property.
Attribute:
from
Type:
string ｜ undefined
i18nDone
Since 2.1.0
Text of date select button
Attribute:
i18n-done
Type:
string
Default:
'Done'
individual
Deprecated
Not supported since 2.0.0.
Attribute:
individual
Type:
boolean
Default:
true
locale
Since 2.1.0
Locale identifier (e.g. 'en' or 'de').
Attribute:
locale
Type:
string ｜ undefined
maxDate
Since 1.1.0
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
Since 1.1.0
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:
''
range
If true a date-range can be selected (from/to).
Attribute:
range
Type:
boolean
Default:
true
textSelectDate
Since 1.1.0
Deprecated
since 2.1.0. Use `i18nDone`
Text of the button that confirms date selection.
Attribute:
text-select-date
Type:
string
Default:
''
to
Since 1.1.0
The selected end date. If the the date-picker-rework is not in range mode this property has no impact. Format has to match the `format` property.
Attribute:
to
Type:
string ｜ undefined
weekStartIndex
Since 2.1.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
dateChange
Since 2.1.0
Triggers if the date selection changes. Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`
Detail:
{ from: string; to: string; }
dateRangeChange
Since 2.1.0
Triggers if the date selection changes. Only triggered if date-picker-rework is in range mode.
Detail:
{ from: string; to: string; }
dateSelect
Since 1.1.0
Date selection confirmed via button action
Detail:
{ from: string; to: string; }
done
Deprecated
NOT getting dispatched after 2.0.0. Use `dateSelect`.
Date selection confirmed via button action
Detail:
string