Angular 8/9 | 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.

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:

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:

Install ng-pick-datetime

After creating the project, next, install the ng-pick-datetime package by running following npm command in terminal:


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 Modules

In the application’s main module we will import OwlDateTimeModule and OwlNativeDateTimeModule. In app.module.ts file make following changes then save:

Adding Date & Time Pickers

Simple date picker can be implemented by adding owlDateTime and owlDateTimeTrigger directives connected to picker overlay having template variable #dt1:

Show only Calendar or Time

The pickerType property is used to show Datepicker or Timepicker at a time.

Show Datepicker Only

Show Timepicker Only

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:

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.

Leave a Reply

Notify of