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 |