Skip to main content

Date time picker

Examples​

Basic​

PreviewAngularReactVueJavaScript

API​

Properties​

Name
Description and specifications
dateFormat
Since 1.1.0
Date format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
Attribute:
date-format
Type:
string
Default:
'yyyy/LL/dd'
eventDelimiter
Since 1.1.0
Deprecated
Not used anymore see `done` event
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:
' - '
from
Since 1.1.0
The selected starting date. If the picker 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'
locale
Since 2.1.0
Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
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 ｜ undefined
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 ｜ undefined
range
If true a date-range can be selected (from/to).
Attribute:
range
Type:
boolean
Default:
true
showHour
Show hour input
Attribute:
show-hour
Type:
boolean
Default:
true
showMinutes
Show minutes input
Attribute:
show-minutes
Type:
boolean
Default:
true
showSeconds
Show seconds input
Attribute:
show-seconds
Type:
boolean
Default:
true
showTimeReference
Since 1.1.0
Show time reference input Time reference is default aligned with
Attribute:
show-time-reference
Type:
boolean
Default:
false
textSelectDate
Since 1.1.0
Deprecated
since 2.1.0. Use `i18nDone`
Text of date select button
Attribute:
text-select-date
Type:
string ｜ undefined
time
Since 1.1.0
Select time with format string
Attribute:
time
Type:
string ｜ undefined
timeFormat
Since 1.1.0
Time format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
Attribute:
time-format
Type:
string
Default:
'HH:mm:ss'
timeReference
Set time reference
Attribute:
time-reference
Type:
"AM" ｜ "PM" ｜ undefined
to
Since 1.1.0
The selected end date. If the the picker 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 1.1.0
Date change
Detail:
string | { from: string; to: string; }
dateSelect
Since 1.1.0
Datetime selection event is fired after confirm button is pressed
Detail:
{ from: string; to: string; time: string; }
done
Deprecated
Use `this.dateChange`
Done event Set `doneEventDelimiter` to null or undefine to get the typed event
Detail:
string
timeChange
Since 1.1.0
Time change
Detail:
string