Angular 15 Bootstrap 5 Datepicker Example

November 23, 2022 XpertPhp

In this tutorial, we will explain to you how to create a bootstrap 5 datapicker in angular 15(Angular 15 Bootstrap 5 Datepicker Example). here we will use the ngx-bootstrap package for bootstrap 5 datapicker.

The ngx-bootstrap package is part of the bootstrap. the bootstrap provides many UI facilities like datepicker, model, button, etc. so we can easily install and use this package in our application.

Create new angular app

We are going to create a new angular app using the following command.

ng new datepicker-example
cd datepicker-example

1 2	ng new datepicker-example cd datepicker-example

Install bootstrap 5 in angular

After the complete created application, you can install the bootstrap using the below command.

npm install bootstrap --save

1	npm install bootstrap --save

now, we will install the ng bootstrap package using the following command.

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

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

We need to add the bootstrap CSS and NGX Datepicker path into the angular.json file. so first we will add that path into the angular.json file.
angular.json

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
     "src/styles.css"
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

"src/styles.css"

]

Import module in angular

In this step, we need to add a module into the src/app/app.module.ts file.

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

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

Update view file in angular

In this step, we will create the input datepicker field and toggle button. when we click on the toggle button that time date picker will be shown.
src/app/app.component.html

<div class="container">
  <h2>Angular 15 Bootstrap 5 Datepicker Example</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>
	<hr />
	<code>Model: {{ model | json }}</code>
</div>

<h2>Angular 15 Bootstrap 5 Datepicker Example</h2>

</div>

</form>

<hr />

<code>Model: {{ model | json }}</code>

</div>

Update component in angular

src/app/app.component.ts

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

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

  constructor() {}
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'datepicker-example';

model;

constructor() {}

}

Run Our Angular Application

Now we will run our Angular application using the below command.

ng serve

ng serve

Please follow and like us: