A material range date picker is a patched version of the material datepicker for Angular with range selection support.
ngx daterangepicker material, angularmaterial datepicker format, mat date range input change event, mat date range picker, angularmaterial date range picker stackblitz
A Vanilla JavaScript of Bootstrap-Datepicker for Bulma and CSS Frameworks
How to make use of it:
1. Easy as pie. Install: add Yarn to Saturn-datepicker or npm Install Saturn-datepicker Import SatDatepickerModule, SatNativeDateModule, MatDatepickerModule.
<mat-form-field> <input matInput placeholder="Choose a date" [satDatepicker]="picker" [value]="date"> <sat-datepicker #picker [rangeMode]="true"></sat-datepicker> <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle> </mat-form-field>
2. Add styles:
@import '~saturn-datepicker/theming'; @include sat-datepicker-theme($theme); // material theme data structure https://material.angular.io/guide/theming#defining-a-custom-theme
3. The value of ngModel/formControl has this interface:
export interface SatDatepickerRangeValue<D> { begin: D | null; end: D | null; }
Material range datepicker Plugin/Github, angular material time picker dropdown, angular material custom datepicker
See Demo And Download
Official Website(SaturnTeam): Click Here
This superior jQuery/javascript plugin is developed by SaturnTeam. For extra Advanced Usages, please go to the official website.
Be First to Comment