How To Add DateRange Picker In Angular Application

Introduction

 

In this article, we will learn how to add date range picker In Angular application.

 

Prerequisites

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Node and NPM installed

Let's create an Angular project by using the following command.

ng new rangesliderdemo

Open this project in Visual Studio Code and install bootstrap by using following command.

npm install bootstrap --save

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line. 

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

Now install ngx-daterange library using the following command. 

npm install ngx-daterange --save

Now create a new component using the following command,

ng g c sliderdemo

Now open sliderdemo.component.ts file and add the following code,

import { Component, OnInit, ViewChild } from '@angular/core';
import { DateRangePickerComponent, IDateRange, IDateRangePickerOptions } from 'ngx-daterange';
import * as moment from 'moment';
@Component({
  selector: 'app-sliderdemo',
  templateUrl: './sliderdemo.component.html',
  styleUrls: ['./sliderdemo.component.css']
})
export class SliderdemoComponent implements OnInit {
  constructor() { }

  @ViewChild('dateRangePicker', { static: true })
  dateRangePicker: DateRangePickerComponent;
  firstFieldEmittedValue: IDateRange;
  firstFieldOptions: IDateRangePickerOptions = {
    format: 'MM/DD/YYYY',
    minDate: moment().subtract(10, 'years'),
    maxDate: moment().add(3, 'years'),
    preDefinedRanges: [
      {
        name: 'Last Week',
        value: {
          start: moment().subtract(1, 'week').startOf('week'),
          end: moment().subtract(1, 'week').endOf('week')
        }
      },
      {
        name: 'Two Weeks Ago',
        value: {
          start: moment().subtract(2, 'week').startOf('week'),
          end: moment().subtract(2, 'week').endOf('week')
        }
      },
      {
        name: 'Three Weeks Ago',
        value: {
          start: moment().subtract(3, 'week').startOf('week'),
          end: moment().subtract(3, 'week').endOf('week')
        }
      },
      {
        name: 'Last Month',
        value: {
          start: moment().subtract(1, 'month').startOf('month'),
          end: moment().subtract(1, 'month').endOf('month')
        }
      },


    ]
  }
  secondFieldOptions: IDateRangePickerOptions = {
    autoApply: false,
    clickOutsideAllowed: false,
    format: 'MM/DD/YYYY',
    icons: 'font-awesome',
    minDate: moment().subtract(10, 'years'),
    maxDate: moment().add(1, 'year'),
  }
  ngOnInit(): void {

  }
}

Now open sliderdemo.component.html file and add the following code,

<div class="row" style="margin-top:10px;margin-bottom: 10px;">
    <div class="col-sm-12 btn btn-success">
      How to Create Date Range Picker in Angular application
    </div>
  </div>
<div class="col-sm-6 form-group">
  <date-range-picker [options]="firstFieldOptions"  [ngModel]="'myDateRange'">
  </date-range-picker>
</div>

Now open sliderdemo.component.css file and add the following css classes.

 .dateRangePicker-wrapper .dateRangePicker .form-inputs>.col {
    min-width: 270px;
    padding: .5rem 15px;
    background-color: #28a745;
}
 .dateRangePicker-wrapper .dateRangePicker:before {
 border-bottom: 0px solid #6e777c !important;

}

Now open app.module.ts file and add the following code,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { SliderdemoComponent } from './sliderdemo/sliderdemo.component';
import { FormsModule } from '@angular/forms';
import { NgxDateRangeModule } from 'ngx-daterange';
@NgModule({
  declarations: [
    AppComponent,
    SliderdemoComponent

  ],
  imports: [
    BrowserModule,,HttpClientModule,NgxDateRangeModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.html file and add the following code,

<app-sliderdemo></app-sliderdemo>

Now, run the application using the 'npm start' command and check the result.

 

 

Select start date and end date

 

Summary

 

In this article, we learned how to add daterange picker In Angular application.