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">
  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>
  42. <tbody *ngFor="let product of products; let i = index">
  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';
  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) { }
  14. ngOnInit() {
  15. this.getProducts();
  16. }
  17. getProducts() {
  18. this.products = this.datepickerService.getAllProducts();
  19. this.tempproducts = this.datepickerService.getAllProducts();
  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. );
  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';
  3. @Injectable()
  5. export class DataService {
  6. employees: any[];
  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. }
  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';
  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.