MatDaterangepicker

This is an extension library for the native Angular Material Datepicker. Then you can use all the options provided by the Matdatepicker material component.

Demo

Requirements

Angular	Version
angular	>= 9.0.0
@angular/material	>= 9.0.0

Installation

npm i mat-daterangepicker

import MatDaterangepickerModule in your module

import { MatDaterangepickerModule } from 'mat-daterangepicker';

@NgModule({
    imports: [
        MatDaterangepickerModule
    ],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
export class AppModule {}

Angular Material Theme

import code bellow in your material style theme to have compatibility with your current material theme.

@import 'mat-daterangepicker/mat-daterangepicker.theme.scss';

@include mat-daterangepicker-theme($theme);

Usage

// in your component
export class DaterangepickerExampleComponent {
    startDate = new Date()
    endDate = new Date()
}

<mat-form-field>
    <input matInput [matDatepicker]="dpRange" type="text" [value]="startDate" placeholder="Start Date">
    <mat-daterangepicker #dpRange></mat-daterangepicker>
</mat-form-field>
<mat-form-field>
    <input matInput [matDaterangepickerEnd]="dpRange" type="text" [value]="endDate" placeholder="End Date">
    <mat-datepicker-toggle matSuffix [for]="dpRange"></mat-datepicker-toggle>
</mat-form-field>

Options

Option	Description
@Input() dualView: boolean	An input to display two calendars when selecting dates
@Input() applyButton: boolean	An input to display an apply button to close the calendar picker
@Input() showCustomRanges: boolean	An input to display default custom ranges options in the calendar picker
@Ouput() apply: EventEmitter	Fired when apply button is clicked

Mehods

Method	Description
applyRange	Apply the range and close the calendar picker
clearRange	Clear the selected dates