What is the use of Bootstrap Datepicker in Angular?
In this article, we will see the use of Bootstrap Datepicker in Angular. The Datepicker is used to make a component that will be shown by using a calendar and we can select the date from it. Adding Bootstrap to the Angular Project can make the better UI design, along with providing some in-built classes for Date that help us to implement it directly.
Bootstrap Datepicker in Angular can be used in the following ways:
- Adding Bootstrap through Angular CLI & NPM, & then creating & using the Datepicker Component
- By installing the Angular ngx Bootstrap & then using the Datepicker Component (Angular ng Bootstrap Datepicker Component)
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install dependency
ng add @ng-bootstrap/ng-bootstrap npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic
Step 4: Add CSS to ./src/styles.css
@import '~bootstrap/dist/css/bootstrap.min.css'; @import '~open-iconic/font/css/open-iconic-bootstrap.css';
Project Structure
It will look like the following:
Example 1: In this example, we will create a simple Bootstrap Datepicker in Angular. We will be adding Bootstrap through Angular CLI & NPM, & then creating & using the Datepicker Component.
HTML
<!-- app.component.html --> < h2 style = "color: green;" >w3wiki</ h2 > < h2 > What is the use of Bootstrap Datepicker in Angular? </ h2 > < 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 # d = "ngbDatepicker" > < div class = "input-group-append" > < button class = "btn btn-outline-secondary calendar" (click)="d.toggle()" type = "button" > </ button > </ div > </ div > </ div > </ form > |
Javascript
// app.component.ts import { Component } from '@angular/core' ; import { BrowserModule, DomSanitizer } from '@angular/platform-browser' @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { model: any } |
Javascript
//app.module.ts import { NgModule } from '@angular/core' ; import { FormsModule, ReactiveFormsModule } from '@angular/forms' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ; import { DlDateTimeDateModule, DlDateTimePickerModule } from 'angular-bootstrap-datetimepicker' ; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, DlDateTimeDateModule, DlDateTimePickerModule, ] }) export class AppModule { } |
Output:
Example 2: In this example, we will use Bootstrap Datepicker in Angular by ngx Bootstrap & then use the Datepicker Component (Angular ng Bootstrap Datepicker Component). We will also display the selected date in the text.
HTML
<!-- app.component.html --> < h2 style = "color: green;" >w3wiki</ h2 > < h2 > What is the use of Bootstrap Datepicker in Angular? </ h2 > < ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"> </ ngb-datepicker > < hr /> < pre >Selected Date: {{ model | json }}</ pre > |
Javascript
//app.component.ts import { Component, inject } from '@angular/core' ; import { NgbCalendar, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap' ; import { FormsModule } from '@angular/forms' ; import { JsonPipe } from '@angular/common' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], imports: [NgbDatepickerModule, FormsModule, JsonPipe], standalone: true , }) export class AppComponent { model: NgbDateStruct; date: { year: number; month: number }; } |
Javascript
//app.module.ts import { NgModule } from '@angular/core' ; import { FormsModule, ReactiveFormsModule } from '@angular/forms' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, NgbModule ] }) export class AppModule { } |
Output:
Contact Us