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.