Datepicker In Angular 9

In this article, we will learn how to implement the Datepicker in Angular 9.

Datepicker will help you with date selection.

NgbDatepicker is a highly configurable component that helps you with selecting calendar dates. NgbDatepicker is meant to be displayed inline on a page or put inside a popup.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new Datepicker

Now, open the newly created project and execute the command given below. It will install ng-bootstrap for the default application.

ng add @ng-bootstrap/ng-bootstrap

Open the app.module.ts file and add the code in it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.html file and add the code in it.

<div class="container mt-4">
  <form class="form-inline">
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker
          [footerTemplate]="footerTemplate" #d="ngbDatepicker" [minDate]="today" readonly>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary calendar" (click)="d.toggle()"></button>
        </div>
        <ng-template #footerTemplate>
          <hr class="my-0">
          <button class="btn btn-primary btn-sm m-2 float-left" (click)="model = today; d.close()">Today</button>
          <button class="btn btn-secondary btn-sm m-2 float-right" (click)="d.close()">Close</button>
        </ng-template>
      </div>
    </div>
  </form>
</div>

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model: NgbDateStruct;
  today = this.calendar.getToday();

  constructor(private calendar: NgbCalendar) { }
}

Open the app.component.css file and add the code in it.

.form-control{
    background-color: #fff;
  }

button.calendar, button.calendar:active {
    width: 2.75rem;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: center;
  }

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Pass Data From Child Component To Parent Component Using @Output() In Angular 9