In this tutorial, we will discuss another but popular Date and Time picker supported by Angular 2+ applications. It is well supported for Datepicker with integrated time picker and Range of date and time picker.
Here we will discuss its installation on a new Angular project and all possible features and scenarios which we come across in a real-world app.
Let’s get started!
Create a new Angular Project
Using the ng CLI tool we will create a new Angular project with the latest version 8.3.17.
Run following command in terminal:
$ ng new angular-datetime-picker
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
Install Angular Material
For using this package we also need Angular material package to be installed as well for adding CDK overlay and Material animations.
So run following npm command to install Material:
$ ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink ? Set up HammerJS for gesture recognition? No ? Set up browser animations for Angular Material? Yes
Install ng-pick-datetime
After creating the project, next, install the ng-pick-datetime
package by running following npm command in terminal:
$ npm i ng-pick-datetime
To install and configure, please follow these steps:
Add Picker style
Now open the styles.css file at project root then add following import file in it then save.
@import "~ng-pick-datetime/assets/style/picker.min.css";
Import Modules
In the application's main module we will import OwlDateTimeModule
and OwlNativeDateTimeModule
. In app.module.ts file make following changes then save:
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, OwlDateTimeModule, OwlNativeDateTimeModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Adding Date & Time Pickers
Simple date picker can be implemented by adding owlDateTime
and owlDateTimeTrigger
directives connected to picker overlay having template variable #dt1
:
<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
<owl-date-time #dt1></owl-date-time>
Show only Calendar or Time
The pickerType
property is used to show Datepicker or Timepicker at a time.
Show Datepicker Only
<owl-date-time #dt1 pickerType="calendar" ></owl-date-time>
Show Timepicker Only
<owl-date-time #dt1 pickerType="timer" ></owl-date-time>
Note: By default the
pickerType
is set to 'both
'
Inline DatePicker
To show date picker inline as an opened up element which is already available selection, we can use owl-date-time-inline
as shown below:
<owl-date-time-inline [(ngModel)]="selectedMoment"></owl-date-time-inline>
Note: Don't forget to add
FormsModule
in app.module.ts file to use[(ngModel)]
Enable Range Selection in Picker
To enable range selection use [selectMode]
property with values 'range
', 'rangeFrom
' or 'rangeTo
'.
'range': Select To and From values of picker.
'rangeFrom' -- Only select the 'from' value, and the picker could only change the 'from' value.
'rangeTo' -- Only the 'to' value, and the picker could only change the 'to' value.