mat-daterangepicker v1.0.1

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

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

Mehods