What is the use of Bootstrap Datepicker in Angular?

Last Updated : 24 Apr, 2025

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:

z123

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;">GeeksforGeeks</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:

Recording-2023-12-01-at-141235

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;">GeeksforGeeks</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 { }