ngx-bootstrap datepicker in angular

Hi Everyone,

You will learn here how to include ngx-datepicker in our Angular project with few example.

Step1 -> run the command to include dependency in your angular project as mentioned below,

ng add ngx-bootstrap --component datepicker

Step2 -> it is necessary to include bootstrap in project for style effect.

a) if you are using bootstrap 3 then include either

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 in your style.css file

or install bootstrap locally using command mentioned below,

npm install bootstrap@3 --save

and include below mentioned line of code in style.css file

@import "~bootstrap/dist/css/bootstrap.min.css" 

b) if you are using bootstrap 4 then include either,

style.css

<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 

or also you can install bootstrap locally using command mentioned below and include below mentioned line of code in style.css file,

@import "~bootstrap/dist/css/bootstrap.min.css";

Step3 ->Here you need to import BsDatepickerModule in app.module.ts file and include in @NgModule as below so that you can access the library.

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
// RECOMMENDED 
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; 
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import) 
import { BsDatepickerModule } from 'ngx-bootstrap';
@NgModule({ 
imports: [ BrowserAnimationsModule, BsDatepickerModule.forRoot()] 
}) 
export class AppModule(){}

Step4 -> Now see the code below written in html file,

app.component.html

<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text" placeholder="Datepicker" class="form-control"bsDatepicker>
</div>
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text" placeholder="Daterangepicker" class="form-control" bsDaterangepicker>
</div>
</div>

Note the points, first div for normal date picker and second div we are using for date-range selection from calendar so that we can see both the example at the same time.

step 5 -> you can also pass already selected min and max date in calendar like,

app.component.html

<input class="form-control drange" bsDaterangepicker [(ngModel)]="bsRangeValue"> 

app.component.ts

import { Component} from '@angular/core';
@Component({ selector: 'app-my-dashboard',
 templateUrl: './my-dashboard.component.html', 
styleUrls: ['./my-dashboard.component.css']
})
export class MyDashboardComponent  {
bsValue = new Date();
bsRangeValue: Date[];
maxDate = new Date();
constructor() { 
this.maxDate.setDate(this.maxDate.getDate()); //current date
this.bsValue.setDate(this.bsValue.getDate() - 120); // 120 days back date
this.bsRangeValue = [this.bsValue, this.maxDate]; //we will see date range //from last 120 days to current</p>
}
}

In the above code variable bsValue is from date time and variable maxDate is current date time.

And so variable bsRangeValue is setting date time from last 120 days till current date time.

For documentation, you can follow below mentioned official link,

https://valor-software.com/ngx-bootstrap/#/datepicker

Thanks…..

If you have any further any doubt, mention in comments we will try to help.