{{announcement.body}}
{{announcement.title}}

Ngx-Bootstrap DateRange Picker and Date Picker

DZone 's Guide to

Ngx-Bootstrap DateRange Picker and Date Picker

In this article, we are going to learn the use of Ngx-Bootstrap DateRange Picker and Date Picker in Angular 8.

· Web Dev Zone ·
Free Resource

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,

TypeScript
 




x


 
1
ng new datepicker



Step 2

Now, let's create a new component by using the following command,

TypeScript
 




xxxxxxxxxx
1


 
1
ng g c ngx-bootstrap-datepicker


   

Step 3

 Install ngx-bootstrap from npm by using the folowing command.

TypeScript
 




xxxxxxxxxx
1


 
1
npm install ngx-bootstrap --save


Or,

TypeScript
 




xxxxxxxxxx
1


 
1
ng add ngx-bootstrap --component datepicker


Step 4

 Now let's add bootstrap styles in our index.html file.

For Bootstrap 3,

HTML
 




xxxxxxxxxx
1


 
1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">



For Bootstrap 4,

HTML
 




xxxxxxxxxx
1


 
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.

HTML
 




xxxxxxxxxx
1
62


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. 

HTML
 




xxxxxxxxxx
1


 
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.

TypeScript
 




xxxxxxxxxx
1
35


 
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

TypeScript
 




xxxxxxxxxx
1


1
ng g service data  



Now, open the data.service.ts file and add the following code,

TypeScript
 




xxxxxxxxxx
1
68


 
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,

HTML
 




xxxxxxxxxx
1


 
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,

TypeScript
 




xxxxxxxxxx
1
20


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,


Date range picker is where we can select a range of datess. After selecting date one event will fire which is an array,

The below image shows that it will fetch only those data which comes in the range from April 1 to April 14. 

The below image shows the normal ngx-bootstrap datepicker. 


  


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.

Topics:
angular 8, bootstrap, tutorial, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}