Angular Boostrap datepicker tutorial, this detailed guide will explain how to implement Bootstrap datepicker or calendar picker in angular using the ngx-bootstrap package.
A calendar is a useful tool; it helps to manage essential events. This UI component enhances the user experience.
We tend to use a calendar often to manage everyday tasks; you can manage your daily tasks, keep an eye on your essential duties, or even manage the time properly.
The ngx-bootstrap library offers a profound solution to implement bootstrap calendar component in an angular application; there are tons of useful components provided by this impeccable library.
Out of which, we are going to use the ngx-bootstrap calendar component for creating or implementing the bootstrap datepicker in the angular app.
You will understand the proper way to use bootstrap 4 datepicker in the angular project. Therefore this bootstrap calendar picker or datepicker example is going to be drastically engaging.
Angular 13 Bootstrap Datepicker Example
- Step 1: Setting Up Angular Environment
- Step 2: Install NGX Bootstrap Package
- Step 3: Register Datepicker Module
- Step 4: Implement Datepicker Calendar
- Step 5: Enable Animation
- Step 6: Test Angular Calendar App
Setting Up Angular Environment
Angular CLI tool allows working on an angular project; hence install this required tool on your system:
npm install @angular/cli -g
Now, you are ready to create the new angular project:
ng new ng-calendar-demo
Move into the project directory:
cd ng-calendar-demo
Disable Strict Angular TypeStrict Errors
The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false
, "noImplicitReturns": false
and "strictTemplates": false
inside the compilerOptions and angularCompilerOptions in tsconfig.json file.
Install NGX Bootstrap Package
Open console, Install Bootstrap package using the suggested schematic:
npm install bootstrap
Now, install the ngx-bootstrap package; this is the most foundational library needed for this guide for implementing calendar component in angular:
npm install ngx-bootstrap
Furthermore, register the CSS in the angular.json config file, which enables the styling for Bootstrap UI components:
...
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
]
...
...
Register Datepicker Module
The datepicker component is customizable to the greater extent; execute the following command to add the datepicker component in your angular project:
ng add ngx-bootstrap --component datepicker
Afterward, import BrowserAnimationsModule, BsDatepickerModule modules in app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
BsDatepickerModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Implement Datepicker Calendar
In this step you will integrate calendar with datepicker in angular. Hence open app.component.html file, plus define the recommended code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
class="form-control"
placeholder="Datepicker"
bsDatepicker>
</div>
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
class="form-control"
placeholder="Daterangepicker"
bsDaterangepicker>
</div>
</div>
</div>
The bsDatepicker
directive initialized the calendar or datepicker module, attach it with the form input element. Whereas the bsDaterangepicker
evokes the date range selector where you can select the date between two ranges.
Enable Animation in Date Picker
Adding animation in the bootstrap calendar is exorbitantly effortless; this plugin gives unbound options to make the developer’s life easy. Set isAnimated property to true, in conjunction with bsConfig.
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsConfig]="{ isAnimated: true }">
</div>
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Daterangepicker"
class="form-control"
bsDaterangepicker
[bsConfig]="{ isAnimated: true }">
</div>
</div>
Test Angular Calendar App
Now, you can test the various datepicker example; all you need is to start an angular development server:
ng serve
After starting the development server, following url manifest on the console, consequently, you can run it on the browser:
http://localhost:4200
Conclusion
The Bootstrap calendar component has been integrated into the angular application; now, you can use it to pick the dates and organize your daily tasks or events.
Hence, this angular calendar tutorial is over, we hope you liked this step-by-step guide.
To know more about more datepicker features check out here.