Angular Material range datepicker – iamrohit.in

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

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

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

disable closing datepicker after date selection

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

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

See live demo and download source code.

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.

Related