Angular 14 Bootstrap 5 Datepicker Example

Angular 14 bootstrap datepicker; In this tutorial, we will learn how to create and use datepicker using bootstrap 5 in angular 14 apps.

Angular 14 Bootstrap Datepicker Example

Use the following steps to create and use datepicker using bootstrap 5 in the angular 14 apps:

• Step 1 – Create New Angular App
• Step 2 – Install Bootstrap 5 and Ng Bootstrap
• Step 3 – Import Form Module
• Step 4 – Create DatePicker HTML in View File
• Step 5 – Update Component ts File
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap 5 and Ng Bootstrap

Open your terminal and navigate to your angular 14 apps directory on terminal. Then execute the following command on it to install bootstrap 5 into your angular 14 apps:

npm install bootstrap --save

Then open your angular.json file and include bootstrap css like “node_modules/bootstrap/dist/css/bootstrap.min.css”. As follows:

.....
    "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],
.....

And, Again open your terminal and execute the following command on it to install ng bootstrap 5 into your angular 14 apps:

npm install --save @ng-bootstrap/ng-bootstrap

Step 3 – Import Module

Visit src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:

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

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

Step 4 – Create DatePicker HTML in View File

Create datepicker using Bootstrap 5 and ng bootstrap. So, visit src/app directory and open app.component.html file. Then update the following code into it to creating datepicker in angular apps; as follows:

<h1>Angular 14 Bootstrap 5 Datepicker Example - Tutsmake.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>
      </div>
    </div>
  </div>
</form>

<hr/>
<pre>Model: {{ model | json }}</pre>

Note that:- In the above form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:

Step 5 – Update Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

import { Component } from '@angular/core';

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

  model:any;

  constructor() {}

}

Step 6 – Start Angular App

In this step, execute the following command on the terminal to start the angular app:

ng serve

Open browser, enter the below url:

http://localhost:4200

Conclusion

Angular 14 bootstrap datepicker; In this tutorial, we have learned how to create and use datepicker using bootstrap 5 in angular 14 apps.

Recommended Angular Tutorials