Post
Ask Question

Ngx-Bootstrap DateRange Picker And Date Picker

Introduction

 
In this article we are going to learn the use of Ngx-Bootstrap DateRange Picker and Date Picker in Angular 8.
 
Ngx-Bootstrap has released a package of open-source tools which is native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article we will learn about DatePicker component which is a cool feature of Ngx-bootstrap.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
 
Let's create a new Angular project using the following NPM command,
  1. ng new datepicker
Step 2
 
Now, let's create a new component by using the following command,
  1. ng g c ngx-bootstrap-datepicker   
Step 3
 
Install ngx-bootstrap from npm by using the folowing command.
  1. npm install ngx-bootstrap --save
Or,
  1. ng add ngx-bootstrap --component datepicker
Step 4
 
Now let's add bootstrap styles in our index.html file .
 
For Bootstrap 3,
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
For Bootstrap 4,
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">   
Step 5
 
Let add the template in our ngx-bootstrap-datepicker.component.html.
  1. <div class="card">    
  2.   <div class="card-body pb-0">    
  3.     <h4 style="text-align: center;">Example of Date Picker and Date Range Picker</h4>    
  4.     <div class="row">    
  5.       <div class="col-12 col-md-12">    
  6.         <div class="card">    
  7.           <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top nav-kc">    
  8.     
  9.             <div class="col-md-6">    
  10.               <div class="input-group">    
  11.                 <input type="text" name="daterange" autocomplete="off" bsDaterangepicker    
  12.                   [bsConfig]="{ rangeInputFormat : 'MMMM Do YYYY', dateInputFormat: 'MMMM Do YYYY', showWeekNumbers: false }"    
  13.                   id="DateOfBirth" placeholder="Date Range" (bsValueChange)="dateRangeCreated($event)"    
  14.                   class="form-control" />    
  15.               </div>    
  16.             </div>    
  17.             <div class="col-md-3">    
  18.               <div class="input-group">    
  19.                 <input type="text" name="daterange" autocomplete="off" bsDatepicker    
  20.                   [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY', showWeekNumbers: false }" id="DateOfBirth"    
  21.                   placeholder="Date" (bsValueChange)="dateCreated($event)" class="form-control" />    
  22.               </div>    
  23.             </div>    
  24.           </nav>    
  25.           <div class="card-body position-relative">    
  26.             <div class="table-responsive cnstr-record product-tbl">    
  27.               <table class="table table-bordered heading-hvr">    
  28.                 <thead>    
  29.                   <tr>    
  30.                     <th>ArtNo.</th>    
  31.                     <th>Brand</th>    
  32.                     <th>    
  33.                       Price/Unit</th>    
  34.                     <th>Provider</th>    
  35.                     <th>P. Art. N</th>    
  36.                     <th>S. A/C</th>    
  37.                     <th>Buy A/C</th>    
  38.                     <th>Created Date</th>    
  39.                   </tr>    
  40.                 </thead>    
  41.     
  42.                 <tbody *ngFor="let product of products; let i = index">    
  43.     
  44.                   <tr>    
  45.                     <td align="center">{{product.ArtNo}}</td>    
  46.                     <td>{{product.Brand}}</td>    
  47.                     <td>{{product.Price }}</td>    
  48.                     <td>{{product.Provider}}</td>    
  49.                     <td>{{product.ProviderArtNo}}</td>    
  50.                     <td>{{product.SalesAccount}}</td>    
  51.                     <td>{{product.BuyAccount}}</td>    
  52.                     <td>{{product.CreatedDate}}</td>    
  53.                   </tr>    
  54.                 </tbody>    
  55.               </table>    
  56.             </div>    
  57.           </div>    
  58.         </div>    
  59.       </div>    
  60.     </div>    
  61.   </div>    
  62. </div>    
In bsConfig method we can format the date and time. showWeekNumbers is a boolean value which is true by default and displays the number of the week .
 
Also we can select the min date. max date, etc. 
  1. <input type="text" name="daterange" autocomplete="off" bsDatepicker      
  2.                   [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY', showWeekNumbers: false }" id="DateOfBirth"      
  3.                   placeholder="Date" (bsValueChange)="dateCreated($event)" class="form-control" />    
Step 6
 
Now, open the ngx-bootstrap-datepicker.component.ts file and add the following code in this file.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { DatePickerService } from '../datepicker.service';  
  3.   
  4. @Component({  
  5.   selector: 'app-ngx-bootstrap-datepicker',  
  6.   templateUrl: './ngx-bootstrap-datepicker.component.html',  
  7.   styleUrls: ['./ngx-bootstrap-datepicker.component.css']  
  8. })  
  9. export class NgxBootstrapDatepickerComponent implements OnInit {  
  10.   products = [];  
  11.   tempproducts=[];  
  12.   constructor(private datepickerService: DatePickerService) { }  
  13.   
  14.   ngOnInit() {  
  15.     this.getProducts();  
  16.   }  
  17.   getProducts() {  
  18.     this.products = this.datepickerService.getAllProducts();  
  19.     this.tempproducts = this.datepickerService.getAllProducts();  
  20.   
  21.   }  
  22.   dateCreated($event){  
  23.     this.products = this.tempproducts;  
  24.     this.products = this.products.filter(x => x.CreatedDate == $event.toJSON().split('T')[0]);  
  25.   }  
  26.   dateRangeCreated($event) {  
  27.     this.products = this.tempproducts;  
  28.     let startDate = $event[0].toJSON().split('T')[0];  
  29.     let endDate = $event[1].toJSON().split('T')[0];  
  30.     this.products = this.products.filter(  
  31.       m => new Date(m.CreatedDate) >= new Date(startDate) && new Date(m.CreatedDate) <= new Date(endDate)  
  32.     );  
  33.   
  34.   }  
  35. }  
Step 7
 
Create a service dataservice using the following NPM command
  1. ng g service data  
Now, open the data.service.ts file and add the following code,
  1. import { Injectable } from '@angular/core';  
  2.   
  3. @Injectable()  
  4.   
  5. export class DataService {  
  6.   employees: any[];  
  7.   
  8.   getAllProducts() {  
  9.     return this.employees = [  
  10.       {  
  11.         ProductId: 1,  
  12.         ArtNo: "100",  
  13.         Provider: "OppoProvider",  
  14.         ProviderArtNo: "1Yu",  
  15.         Brand: "Oppo",  
  16.         Price: 7810.23,  
  17.         BuyAccount: "123",  
  18.         SalesAccount: "321",  
  19.         CreatedDate: "2020-04-17"  
  20.       },  
  21.       {  
  22.         ProductId: 1,  
  23.         ArtNo: "101",  
  24.         Provider: "OppoProvider",  
  25.         ProviderArtNo: "1Yu",  
  26.         Brand: "Oppo",  
  27.         Price: 2310.23,  
  28.         BuyAccount: "123",  
  29.         SalesAccount: "321",  
  30.         CreatedDate: "2020-04-15"  
  31.       },  
  32.       {  
  33.         ProductId: 1,  
  34.         ArtNo: "102",  
  35.         Provider: "OppoProvider",  
  36.         ProviderArtNo: "1Yu",  
  37.         Brand: "Oppo",  
  38.         Price: 7810.23,  
  39.         BuyAccount: "123",  
  40.         SalesAccount: "321",  
  41.         CreatedDate: "2020-04-11"  
  42.       },  
  43.       {  
  44.         ProductId: 1,  
  45.         ArtNo: "103",  
  46.         Provider: "OppoProvider",  
  47.         ProviderArtNo: "1Yu",  
  48.         Brand: "Oppo",  
  49.         Price: 5810.23,  
  50.         BuyAccount: "123",  
  51.         SalesAccount: "321",  
  52.         CreatedDate: "2020-03-21"  
  53.       },  
  54.       {  
  55.         ProductId: 1,  
  56.         ArtNo: "104",  
  57.         Provider: "OppoProvider",  
  58.         ProviderArtNo: "1Yu",  
  59.         Brand: "Oppo",  
  60.         Price: 4770.23,  
  61.         BuyAccount: "143",  
  62.         SalesAccount: "211",  
  63.         CreatedDate: "2020-03-01"  
  64.       },  
  65.     ];  
  66.   }  
  67.   
  68. }  
Step 8
 
Now, open the app.component.html file and add the following code in the file,
  1. <app-ngx-bootstrap-datepicker></app-ngx-bootstrap-datepicker>   
Step 9
 
Let's open app.module.ts file and add the following code in the file,
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule} from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';  
  6. import { NgxBootstrapDatepickerComponent } from './ngx-bootstrap-datepicker/ngx-bootstrap-datepicker.component';  
  7.   
  8. @NgModule({  
  9.    declarations: [  
  10.    AppComponent,  
  11.    NgxBootstrapDatepickerComponent  
  12. ],  
  13. imports: [  
  14.    BrowserModule,  
  15.    FormsModule,  
  16.    BsDatepickerModule.forRoot()  
  17.    ],  
  18.    bootstrap: [AppComponent]  
  19. })  
  20. export class AppModule { }  
Now it's time for the output,
 
Ngx-Bootstrap DateRange Picker And Date Picker
Ngx-Bootstrap DateRange Picker And Date Picker 
 
Date range picker is where we can select a range of datess. After selecting date one event will fire which is an array,
 
Ngx-Bootstrap DateRange Picker And Date Picker 
 
The below image shows that it will fetch only those data which comes in the range from April 1 to April 14.
 
Ngx-Bootstrap DateRange Picker And Date Picker 
 
The below image shows the normal ngx-bootstrap datepicker.
 
Ngx-Bootstrap DateRange Picker And Date Picker 
Ngx-Bootstrap DateRange Picker And Date Picker
 

Conclusion

 
I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.
 
Please let me know how to improve it.


Similar Articles