Home AngularJs Angular 14 Bootstrap 5 Datepicker

Angular 14 Bootstrap 5 Datepicker

by Shahriar Sagor
Angular 14 Bootstrap 5 Datepicker

Hello Dev , today now in this tutorial, i will show you angular 14 bootstrap datepicker. From here you will learn how you can use bootstrap datepicker in angular 14. So in this post i will give you a simple example of angular 14 ng-bootstrap-datepicker. I can see the bootstrap datepicker in angular 14. Just need to follow bellow step for how to add bootstrap datepicker in angular 14. Here we know about Angular 14 Bootstrap 5 Datepicker .

Step 1: Create New App

We can easily create our angular app by using the bellow command:

ng new my-new-app
Step 2: Install Bootstrap 5

Now in this step, i will install bootstrap core package. so i can use the bootstrap css,. So let’s install by following command:

npm install bootstrap --save

Now, i have to include bootstrap css as like “node_modules/bootstrap/dist/css/bootstrap.min.css”. So let’s add it on the angular.json file.


    "styles": [
Step 3: Install Ng Bootstrap

Then now in this step, i will install Ng Bootstrap package. So i can use the bootstrap ui. Now let’s install by using the following command:

npm install --save @ng-bootstrap/ng-bootstrap
Step 4: Import Module

So in this step, i have to import NgbModule and FormsModule to app.module.ts file. So let’s import it as like as bellow:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }
Step 5: Updated View File

Now here, i will updated our html file. i will create the simple bootstrap input fields for datepicker.

so let’s put the bellow code:


<h1>Angular 14 Bootstrap 5 Datepicker Example - CodingsPoint.com</h1>
<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>
<pre>Model: {{ model | json }}</pre>
Step 4: Use Component ts File

Now i have to update my component.ts file here i will be write code of bootstrap datepicker model, so let’s update as like as bellow:


import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'appBootstrap';
  constructor() {}

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook


You may also like