Angular 17 Datepicker Example Bootstrap

To install and use Bootstrap 5 datepicker in Angular 17; Simply install Bootstrap 5 datepicker using ng add @ng-bootstrap/ng-bootstrap command and then create datepicker component and import it in app.module.ts on Angular 17 applications.

How to use Bootstrap Datepicker in Angular?

Here are the steps to install Bootstrap 5 datepicker using ng add @ng-bootstrap/ng-bootstrap command and use it on Angular 17 applications:

Step 1: Install and Set Up New Angular Project

Run the npm install -g @angular/cli && ng bootstrap-datepicker-angular command on cmd or terminal to install and set up the new angular application on your server

npm install -g @angular/cli
ng bootstrap-datepicker-angular

Step 2: Install Bootstrap 5 DatePicker

After installing and setup the Angular application, you need to install the Bootstrap 5 datapicker, which you can do using the ng add @ng-bootstrap/ng-bootstrap command:

ng add @ng-bootstrap/ng-bootstrap

Step 3: Create the Datepicker Component

To create a datePicker component; simply run ng generate component date-picker command on cmd or terminal window:

ng generate component date-picker

Step 4: Use Bootstrap 5 Datepicker in Component

To use bootStrap 5 datePicker functions in date-picker.component.ts typescript file, you can do it like following:

import { Component } from '@angular/core';
import { NgbAlertModule, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-date-picker',
  standalone: true,
  imports: [NgbDatepickerModule, NgbAlertModule, FormsModule, JsonPipe],
  templateUrl: './date-picker.component.html',
  styleUrl: './date-picker.component.css'
})
export class DatePickerComponent {
model: NgbDateStruct | undefined;
}

To create DatePicker on html views, Simply open date-picker.component.html and create it like following:

<form class="row row-cols-sm-auto">
	<div class="col-12">
		<div class="input-group">
			<input
				class="form-control"
				placeholder="yyyy-mm-dd"
				name="dp"
				[(ngModel)]="model"
				ngbDatepicker
				#d="ngbDatepicker"
			/>
			<button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
		</div>
	</div>
</form>

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

<ngb-alert class="mt-3 mb-0" type="info" [dismissible]="false">
	You must provide the icon for the button that matches your application's style. In this example, the icon comes from
	<code>bootstrap-icons</code>.
</ngb-alert>

Step 5: Add Styles

To add Bootstrap styles, you need to import the Bootstrap CSS file. Open the angular.json file and add the Bootstrap CSS to the styles array:

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

Step 6: Import BootStrap DatePicker & Other Modules

Import bootstrap 5 datePicker components in app.component.html file; like following:

<!-- app.component.html -->
<div class="container mt-4">
  <app-date-picker></app-date-picker>
</div>

Navigate to the application root directory and open app.module.ts typescript file, and then import bootstrap 5 datepicker and other modules into it; like following:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { DatePickerComponent } from './date-picker/date-picker.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, DatePickerComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'bootstrap-datepicker';
}

Step 7: Run the Application

In this step, execute the following command on the command prompt or cmd to start the angular app:

ng serve

Open your browser and navigate to http://localhost:4200/. You should see the Bootstrap 5 datepicker in action, allowing you to select dates from the calendar popup.

While running this app, get any error, simply open tsconfig.json file , inside “compilerOptions” add the following line:

"strictPropertyInitialization": false,

Conclusion

That’s it; You have successfully learned how to integrate and use datepicker using bootstrap in angular 17 projects.

Recommended Angular Tutorials