mat-range-datepick

Material range datepicker

Material datepicker with range support

What is this?

Issue in material2 repo.

how to use it?

Installation: yarn add mat-range-datepicker or npm install mat-range-datepicker Import MatRangeDatepickerModule, MatRangeNativeDateModule and MatDatepickerModule

  <mat-form-field>
    <input matInput [matRangeDatepicker]="resultPicker">
    <mat-range-datepicker
        #resultPicker
        [rangeMode]="true">
    </mat-range-datepicker>
   </mat-form-field>

Add styles:

• If you are using CSS: copy-paste or include somehow the file mat-range-datepicker/bundle.css
• If you are using SCSS:

@import '~mat-range-datepicker/theming';
@include mat-range-datepicker-theme($theme); # material theme data structure https://material.angular.io/guide/theming#defining-a-custom-theme 

ngModel/formControl value have this interface:

export interface matRangeDatepickerRangeValue<D> {
  begin: D | null;
  end: D | null;
}

Licence: MIT

Publish your own package

yarn build:lib
(cd dist ; npm pack)
npm publish