How To Add Datepicker In Angular

The Code Points September 25, 2022 0

In this article, we will learn how to add a Datepicker in an angular application. Datepicker will help you with date selection and validation and more.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new angular-datepicker

Now, we need to install the ng-bootstrap npm package using the following command

ng add @ng-bootstrap/ng-bootstrap

Now, we need to add NgbModule and FormsModule into the app.module.ts file using the following code.

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 { }

Now, add the following code under the app.component.ts file.

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) { }
}

Now, using the following code add the datepicker control under the app.component.html file.

<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>

Now, add the following code under the app.component.css file.

.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;
}

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to select the date from datepicker.

Conclusion

In this article, we learned how to add a Datepicker in an angular application using the NgbDatepicker.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.