The Bootstrap 5 datePicker component allows us to easily select dates from a calendar popup, making it a valuable tool for any angular project that requires date selection.
In this tutorial, you will learn how to integrate and use datePicke in angular 16 apps using bootstrap 5 and ngx-bootstrap/datepicker.
Angular 16 Bootstrap 5 Datepicker Example Tutorial
Stesp to integrate and use datepicker using bootstrap 5 and ngx-bootstrap/datepicker in the angular 16 projects:
- Step 1: Set Up the Angular Project
- Step 2: Install Bootstrap 5 and ngx-bootstrap/datepicker
- Step 3: Import Required Modules
- Step 4: Implement the Datepicker in the Component
- Step 5: Add Styles
- Step 6: Test the Datepicker
- Step 7: Run the Application
Step 1: Set Up the Angular Project
If you haven’t already set up an Angular 16 project, follow these steps to create a new one.
Install the Angular CLI globally (if you haven’t already):
npm install -g @angular/cli
Execute the following command on command prompt or cmd to create a new Angular project:
ng bootstrap-datepicker-angular
Step 2: Install Bootstrap 5 and ngx-bootstrap/datepicker
Next, Open your command prompt or cmd and type the following commands to navigate to your angular apps directory and install bootstrap 5 and dependencies into your angular 16 projects:
cd bootstrap-datepicker-angular npm install [email protected] popper.js npm install [email protected] npm install ngx-bootstrap/[email protected]
Step 3: Import Required Modules
Now, let’s import the necessary modules in the app.module.ts file.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
BsDatepickerModule.forRoot() // Add this line to import the BsDatepickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Step 4: Implement the Datepicker in the Component
Now, you need to implement the datepicker in a component. So, open command prompt or cmd and execute the following command into it to create a new component using the Angular CLI:
ng generate component date-picker
Then Open the date-picker.component.ts file and define a variable for the date value:
// date-picker.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
selectedDate: Date; // Variable to store the selected date
}
Next, Open the date-picker.component.html file and add the datepicker input:
<!-- date-picker.component.html -->
<div class="container mt-4">
<h3>Select a Date - Tutsmake.com</h3>
<input
type="text"
class="form-control"
bsDatepicker
[(bsValue)]="selectedDate"
[bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }"
/>
</div>
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: Test the Datepicker
Finally, let’s test the datepicker by adding the component to the app.component.html file.
<!-- app.component.html --> <div class="container mt-4"> <app-date-picker></app-date-picker> </div>
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.
Conclusion
That’s it; You have successfully learned how to integrate and use datepicker using bootstrap 5 in angular 16 projects.
