The examples above are quite basic. The picker has much more features,
and you could learn more about those from demo page.
Animation
This picker uses angular animations to improve the user experience,
therefore you need to install @angular/animations and import BrowserAnimationsModule to your application.
If you prefer to disable animation effect, use NoopAnimationsModule instead.
Choose a date implementation
The date-time picker was built to be date implementation agnostic.
Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation.
OwlNativeDateTimeModule - support for native JavaScript Date object
OwlMomentDateTimeModule - support for MomentJs
Properties for owl-date-time
Name
Type
Required
Default
Description
pickerType
both, calendar, timer
Optional
both
Set the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
pickerMode
popup, dialog
Optional
popup
The style the picker would open as.
startView
month, year, multi-year
Optional
month
The view that the calendar should start in.
startAt
T/null
Optional
null
The moment to open the picker to initially.
endAt
T/null
Optional
null
The the default selected time for range calendar end time
firstDayOfWeek
number
Optional
0
Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday
showSecondsTimer
boolean
Optional
false
When specify it to true, it would show a timer to configure the second's value
hideOtherMonths
boolean
Optional
false
Whether to hide dates in other months at the start or end of the current month
hour12Timer
boolean
Optional
false
When specify it to true, the timer would be in hour12 format mode
When specify to true, it would disable the picker.
backdropClass
string/string[]
Optional
null
Custom class for the picker backdrop.
panelClass
string/string[]
Optional
null
Custom class for the picker overlay panel.
Events for owl-date-time
Events
Parameter
Description
afterPickerOpen
null
Callback to invoke when the picker is opened
afterPickerClosed
null
Callback to invoke when the picker is closed.
yearSelected
T
Callback to invoke when the year is selected.This doesn't imply a change on the selected date.
monthSelected
T
Callback to invoke when the month is selected.This doesn't imply a change on the selected date.
Properties for input[owlDateTime]
Name
Type
Required
Default
Description
owlDateTime
OwlDateTimeComponent<T>
Require
null
The date time picker that this input is associated with.
owlDateTimeFilter
( date: T)=>boolean
Optional
null
A function to filter date time.
disabled
boolean
Optional
false
When specify to true, it would disable the picker's input.
min
<T>
Optional
null
The minimum valid date time.
max
<T>
Optional
null
The maximum valid date time.
selectMode
single, range, rangeFrom, rangeTo
Optional
single
Specify the picker's select mode. single: a single value allowed, range: allow users to select a range of date-time, rangeFrom: the input would only show the 'from' value and the picker could only selects 'from' value, rangeTo: the input would only show the 'to' value and the picker could only selects 'to' value.
rangeSeparator
string
Optional
-
The character to separate the 'from' and 'to' in input value in range selectMode.
Events for input[owlDateTime]
Events
Parameter
Description
dateTimeChange
source: OwlDateTimeInput, value: input value, input: the input element
Callback to invoke when change event is fired on this <input [owlDateTime]>
dateTimeInput
source: OwlDateTimeInput, value: input value, input: the input element
Callback to invoke when an input event is fired on this <input [owlDateTime]>.
Properties for [owlDateTimeTrigger]
Name
Type
Required
Default
Description
owlDateTimeTrigger
OwlDateTimeComponent<T>
Require
null
The date time picker that this trigger is associated with.
disabled
boolean
Optional
false
When specify to true, it would disable the trigger.
Properties for [owlDateTimeTrigger]
Name
Type
Required
Default
Description
owlDateTimeTrigger
OwlDateTimeComponent<T>
Require
null
The date time picker that this trigger is associated with.
disabled
boolean
Optional
false
When specify to true, it would disable the trigger.
Properties for owl-date-time-inline
Name
Type
Required
Default
Description
pickerType
both, calendar, timer
Optional
both
Set the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
startView
month, year, multi-year
Optional
month
The view that the calendar should start in.
startAt
T/null
Optional
null
The moment to open the picker to initially.
endAt
T/null
Optional
null
The the default selected time for range calendar end time
firstDayOfWeek
number
Optional
0
Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday
showSecondsTimer
boolean
Optional
false
When specify it to true, it would show a timer to configure the second's value
hideOtherMonths
boolean
Optional
false
Whether to hide dates in other months at the start or end of the current month
hour12Timer
boolean
Optional
false
When specify it to true, the timer would be in hour12 format mode
stepHour
number
Optional
1
Hours to change per step.
stepMinute
number
Optional
1
Minutes to change per step.
stepSecond
number
Optional
1
Seconds to change per step.
disabled
boolean
Optional
false
When specify to true, it would disable the picker.
owlDateTimeFilter
( date: T)=>boolean
Optional
null
A function to filter date time.
min
<T>
Optional
null
The minimum valid date time.
max
<T>
Optional
null
The maximum valid date time.
selectMode
single, range, rangeFrom, rangeTo
Optional
single
Specify the picker's select mode. single: a single value allowed, range: allow users to select a range of date-time, rangeFrom: the input would only show the 'from' value and the picker could only selects 'from' value, rangeTo: the input would only show the 'to' value and the picker could only selects 'to' value.
Localization and DateTime Format
Localization for different languages and formats is defined by OWL_DATE_TIME_LOCALE and OWL_DATE_TIME_FORMATS. You could learn more about this from here.