Angular Material range datepicker

by Posted on

Are you looking for angular date range picker for your angular app. Then in this post i am going to share awesome Material range datepicker. This is patched version of Material Datepicker for Angular with range selection support.

Material date range picker

Advantages

  1. You can change order of views: month, year and multi-year
  2. You can keep calendar to be opened after selecting a date (in singular range mode) or a range of dates (in range mode)
  3. You can use all original material attributes: min, max, formControl and others

Installation:

As easy as pie.
Installation: yarn add saturn-datepicker or npm install saturn-datepicker
Import SatDatepickerModule, SatNativeDateModule and 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>

Add styles:

  • If you are using CSS: copy-paste or include somehow the file saturn-datepicker/bundle.css
  • If you are using SCSS (preferable):
@import '~saturn-datepicker/theming';
@include sat-datepicker-theme($theme); # material theme data structure https://material.angular.io/guide/theming#defining-a-custom-theme

add option to sort views when clicking on period label button

orderPeriodLabel option sort the label period views.
– Default [multi-year]: multi-year then back to month
– Month [month]: month > year > multi-year

  <mat-form-field>
    <input matInput [satDatepicker]="resultPicker">
    <sat-datepicker
        #resultPicker
        [rangeMode]="true"
        orderPeriodLabel="month">
    </sat-datepicker>
   </mat-form-field>


disable closing datepicker after date selection

closeAfterSelection option enables or disables datepicker closing after date selections. By default the option is true

  <mat-form-field>
    <input matInput [satDatepicker]="resultPicker">
    <sat-datepicker
        #resultPicker
        [rangeMode]="true"
        [closeAfterSelection]="false">
    </sat-datepicker>
   </mat-form-field>

In range mode, how to select the first date selected if the user closes the picker without selecting another ?

selectFirstDateOnClose option enables or disables the selection of the first date when closing the datepicker before selecting another date.
By default the option is false

  <mat-form-field>
    <input matInput [satDatepicker]="resultPicker">
    <sat-datepicker
        #resultPicker
        [rangeMode]="true"
        [selectFirstDateOnClose]="true">
    </sat-datepicker>
   </mat-form-field>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by SaturnTeam, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin