Angular 9|8 Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

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.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

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.