Press "Enter" to skip to content

Angular Material Date Picker With Range Selection | saturn-datepicker

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *