ng2 datepicker with example Using Angular 13

This tutorial help to implement datepicker into your angular 2+ application. I’ll use ng2-datepicker component to integrate datepicker with the angular application.

ng2-datepicker

The ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable. You can get more options such as minDate, maxDate, format date etc.

Checkout Other tutorials:

• Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
• Alternate Table Rows Color using jQuery or CSS
• How to Refresh Page Using JavaScript & jQuery
• Add Datepicker to Input Field using jQuery UI

How To Install ng2 datepicker

Let’s run the following command to install ng2-datepicker:

npm install ng2-datepicker --save

How To Import Package in Ng2

We’ll import DatepickerModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerOptions, DateModel } from 'ng2-datepicker';

@NgModule({
  imports: [BrowserModule, DatepickerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

How To use ng2-datepicker Component

Import DatePickerOptions and DateModel into your app component, then configure two properties: date and options.

The DateModel property has been set to Date. Options is set to DatePickerOptions, which allows you to configure all date options:

export class AppComponent {

  title = 'Example of ng2-datepicker';

  date: DateModel;
  options: DatePickerOptions = {
    format: 'DD-MM-YYYY',
    todayText: 'test',
    style: 'big'
  };

  constructor() {
    this.options = new DatePickerOptions();
  }

}

We’ll call datepicker component into ng2 component class:

<ngx-datepicker [options]="options" [(ngmodel)]="date"></ngx-datepicker>

where date and options variable is defined into your component.

Run your local server to test them:

ng serve -o