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.

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
</pre>
<h4>Install Angular Material</h4>
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:
<pre class="lang:js mark:1 decode:true">$ 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</pre>
<h4>Install ng-pick-datetime</h4>
After creating the project, next, install the <code>ng-pick-datetime package by running following npm command in terminal:
$ npm i ng-pick-datetime</pre>
 

To install and configure, please follow these steps:
<h4>Add Picker style</h4>
Now open the <strong>styles.css</strong> file at project root then add following import file in it then save.
<pre><code class="language-scss">@import "~ng-pick-datetime/assets/style/picker.min.css";</pre>
<h4>Import Modules</h4>
In the application's main module we will import <code>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></pre>
<img class="aligncenter wp-image-15 size-full" src="http://principalcode.online/wp-content/uploads/2019/11/Angular-date-time-picker_1.jpg" alt="" width="323" height="524" />
<h5>Show only Calendar or Time</h5>
The <code>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></pre>

<blockquote>Note: Don't forget to add <code>FormsModule in app.module.ts file to use [(ngModel)]

Enable Range Selection in Picker
To enable range selection use <strong>[selectMode]</strong> 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.
Category: Angular