3 Steps To Use Bootstrap Datepicker In Angular 4 [Angular 4/5]

This article will guide you over how you can use Bootstrap Datepicker in Angular 4 and Angular 5 app.

Datepicker is one of the crucial element while we’re caring about the UI of our application. So, it’s important to choose a UI friendly datepicker while start developing your application.

And bootstrap is always been on the top from the list of UI frameworks for developers to choose.

So, let’s follow simple steps to integrate bootstrap datepicker in Angular 4 app.

1. Create an Angular 4 app

Note: Skip this step, if you already have app ready.

By using Angular CLI command, you can set up an Angular 4 app.

ng new angular4-bootstrap-datepicker

2. Install bootstrap in your app

Next, let’s make our app bootstrap compatible by installing the ng-bootstrap in our angular 4 app to use the bootstrap datepicker.

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

Now, let’s import bootstrap CSS in our app.

Here, I am going to import bootstrap CDN URL for using CSS.

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

3. Import & Use Bootstrap Datepicker in Angular 4 app

Now, you are ready to use bootstrap in our app.

We should import needed bootstrap modules in our main module.

/src/app/app.module.ts

//Import browser module
import {BrowserModule } from '@angular/platform-browser';
//Import core module
import {NgModule } from '@angular/core';
//Import bootstrap required module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
//Import forms module for forms element
import {FormsModule} from '@angular/forms';

//Import app component
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Takeaways,

  • First of all, import NgbModule from @ng-bootstrap/ng-bootstrap to make sure that, we’re calling bootstrap in our app.
  • Secondly, use NgbModule.forRoot() in imports section.

Next, let’s use the bootstrap datepicker in our Angular 4 app by just using a simple HTML input box with ngbDatepicker.

Note: Here, don’t forget to import FormsModule in main module before start using the input elements.

/src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Simple Bootstrap Datepicker In Angular 4 App';
  model;
}

Next, let’s see how the datepicker can be called in the HTML template.

/src/app/app.component.html

{{title}}

<input class="form-control" placeholder="yyyy-mm-dd"
       name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()">

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

Finally, when you select a particular date, it will show the selected date array at the bottom of the page.

Simple, right? these are the easiest steps to integrate bootstrap datepicker in your Angular 4 and Angular 5 app.

Moreover, if you’re looking integrate other bootstrap components with Angular 4, you can use following suggested visit.

Suggested: Use Bootstrap Components In Angular 4 [Modal, Progressbar, Alerts, etc]

Also, if you want to customize your datepicker with multiple options, you can visit different flavors of bootstrap datepickers.

I hope, you loved this article and it’s been helpful to you. Don’t forget to share!

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of