Skip to content

alexey-vykhrystyuk-arcadia/mat-range-datepicker

 
 

Repository files navigation

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

About

Material Datepicker with range selection

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 87.3%
  • HTML 6.2%
  • CSS 3.3%
  • Starlark 1.6%
  • Other 1.6%