Angular Date Time Picker Schedule
Angular date time picker - Angular reusable UI component This package supports Angular 9+
How to Use
- Install with npm:
npm install ngx-date-time-picker-schedule --save
- Add styles.
If you are using Angular CLI, you can add this to your styles.css:
If you are not using the Angular CLI, you can include the picker.min.css via a
@import "~ngx-date-time-picker-schedule/assets/style/picker.min.css";
<link>
element in your index.html. - Add OwlDateTimeModule and OwlNativeDateTimeModule to your @NgModule like example below
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyTestApp } from './my-test-app'; import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ngx-date-time-picker-schedule'; @NgModule({ imports: [ BrowserModule, OwlDateTimeModule, OwlNativeDateTimeModule, ], declarations: [ MyTestApp ], bootstrap: [ MyTestApp ] }) export class MyTestAppModule {}
- Connecting a picker to an input and a trigger.
<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time"> <owl-date-time #dt1></owl-date-time>
The examples above are quite basic. The picker has much more features, and you could learn more about those from demo page.<input [owlDateTime]="dt2" placeholder="Date Time"> <span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span> <owl-date-time #dt2></owl-date-time>
Animation
This picker uses angular animations to improve the user experience,
therefore you need to install @angular/animations
and import BrowserAnimationsModule
to your application.
npm install @angular/animations --save
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
//...
],
//...
})
export class YourAppModule { }
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
owl-date-time
Properties for 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 |
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. |
scrollStrategy |
ScrollStrategy | Optional | BlockScrollStrategy |
Define the scroll strategy when the picker is open. Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies. |
disabled |
boolean | Optional | false |
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. |
owl-date-time
Events for 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. |
input[owlDateTime]
Properties for 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. |
input[owlDateTime]
Events for 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]> . |
[owlDateTimeTrigger]
Properties for 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. |
[owlDateTimeTrigger]
Properties for 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. |
owl-date-time-inline
Properties for 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.
Dependencies
none
License
- License: MIT