Date Range Picker Component-Based On Angular Material Calendar


NgxMatDaterangePicker Angular Material Date range picker with configurable date presets. Fully compatible with the latest Angular releases.

angularmaterial date range picker stackblitz, ngx daterangepicker material, date range picker angular, angular datepicker example, angular material calendar

How to make use of it:


npm install ngx-mat-daterange-picker --save
yarn add ngx-mat-daterange-picker --save

1. Import the NgxMatDrpModule module into your application module.

import { NgxMatDrpModule } from 'ngx-mat-daterange-picker';

  imports: [..., NgxMatDrpModule, ...],
export class AppModule { }

2. Set up the NgxDrpOptions configuration required by the component and handler function to receive the scope object when the date is specified.

import { Component } from '@angular/core';
import { NgxDrpOptions, PresetItem, Range } from 'ngx-mat-daterange-picker';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {

  range:Range = {fromDate:new Date(), toDate: new Date()};
  presets:Array<PresetItem> = [];

  ngOnInit() {
    const today = new Date();
    const fromMin = new Date(today.getFullYear(), today.getMonth()-2, 1);
    const fromMax = new Date(today.getFullYear(), today.getMonth()+1, 0);
    const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
    const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);

    this.options = {
                    presets: this.presets,
                    format: 'mediumDate',
                    range: {fromDate:today, toDate: today},
                    applyLabel: "Submit",
                    calendarOverlayConfig: {
                      shouldCloseOnBackdropClick: false,
                      hasBackDrop: false
                    // defaultUnselect: true,
                    // cancelLabel: "Cancel",
                    // excludeWeekends:true,
                    // fromMinMax: {fromDate:fromMin, toDate:fromMax},
                    // toMinMax: {fromDate:toMin, toDate:toMax}
  // handler function that receives the updated date range object
  updateRange(range: Range){
    this.range = range;
  // helper function to create initial presets
  setupPresets() {

    const backDate = (numOfDays) => {
      const today = new Date();
      return new Date(today.setDate(today.getDate() - numOfDays));
    const today = new Date();
    const yesterday = backDate(1);
    const minus7 = backDate(7)
    const minus30 = backDate(30);
    const currMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
    const currMonthEnd = new Date(today.getFullYear(), today.getMonth()+1, 0);
    const lastMonthStart = new Date(today.getFullYear(), today.getMonth()-1, 1);
    const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
    this.presets =  [
      {presetLabel: "Yesterday", range:{ fromDate:yesterday, toDate:today }},
      {presetLabel: "Last 7 Days", range:{ fromDate: minus7, toDate:today }},
      {presetLabel: "Last 30 Days", range:{ fromDate: minus30, toDate:today }},
      {presetLabel: "This Month", range:{ fromDate: currMonthStart, toDate:currMonthEnd }},
      {presetLabel: "Last Month", range:{ fromDate: lastMonthStart, toDate:lastMonthEnd }}

3. Pass the new scoping handler function reference to the selectedDateRangeChanged event trigger and the NgxDrpOptions options reference to the options input property.

<ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" [options]="options" #dateRangePicker></ngx-mat-drp>

4. Settings

export interface PresetItem {
    presetLabel: string;
    range: Range;

export interface Range {
    fromDate: Date;
    toDate: Date;

export interface CalendarOverlayConfig {
    panelClass?: string;
    hasBackdrop?: boolean;
    backdropClass?: string;
    shouldCloseOnBackdropClick?: boolean;

export interface NgxDrpOptions {
    presets: Array<PresetItem>;
    format: string;
    range: Range;
    excludeWeekends?: boolean;
    locale?: string;
    fromMinMax?: Range;
    toMinMax?: Range;
    applyLabel?: string;
    cancelLabel?: string;
    animation?: boolean;
    calendarOverlayConfig?: CalendarOverlayConfig;
    placeholder?: string;
    startDatePrefix?: string;
    endDatePrefix?: string;

Material Date Range Picker, NgxMatDaterangePicker Plugin/Github, mat date range input change event

See Demo And Download

Official Website(ashishgkwd): Click Here

This superior jQuery/javascript plugin is developed by ashishgkwd. For extra Advanced usage, please go to the official website.