Angular Material range datepicker
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.
Advantages
- You can change order of views: month, year and multi-year
- You can keep calendar to be opened after selecting a date (in singular range mode) or a range of dates (in range mode)
- 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.