mat-range-datepick
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Material range datepicker

Material datepicker with range support

What is this?

Issue in material2 repo. Material date range picker

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

Package Sidebar

Install

npm i mat-range-datepick

Weekly Downloads

4

Version

1.0.0

License

MIT

Unpacked Size

3.26 MB

Total Files

164

Last publish

Collaborators

  • ericferreira1992