Angular material date picker (date range feature) on version 10

3
votes

Angular team released Angular version 10 and also updated the Angular material with a new feature for the date picker, a feature many of us waited for so long, a date range !

Today I use saturn-datepicker, an npm package which also has a LINEAR option like in the following example.

<sat-calendar
    [rangeMode]="true"
    (dateRangesChange)="inlineRangeChange($event)"
    #inlineRangePicker
>
</sat-calendar>

this puts the calendar on the page and removes the need to click in order to open the calendar in a pop up window;

In Angular material it's possible to do the same using mat-calendar like so.

<mat-calendar>
</mat-calendar>

my question is how to apply [rangeMode]="true" like in saturn-datepicker ??

2
angularangular-material
Haven't found anything related so far in docs. If it's not there they may introduce it of we can do it with custom logic somehow. – Wahab Shah
I found a solution using material calendar: stackoverflow.com/questions/67484281/… – Julian Egner

2 Answers

0
votes

I just looked at the latest source code for MatCalendar. It does not support a range - it is, as the name implies, a single control implementing a calendar.

The DatePicker component (single date dialog) basically encapsulates a MatCalendar to make it a dialog.

The new DateRangePicker component similarly encapsulates two MatCalender instances, and presents them in a dialog.

So, at this point, it looks like Material does not supply an inline date range picker.

The only thing that I can suggest is to create your own component with two MatCalender instances, and look at the MatDateRangePicker code to see how any interaction between the two calendars was handled.

The relavant source code can be found at https://github.com/angular/components/tree/master/src/material

0
votes

I'm afraid that it's not possible, you need work with the mat-calendar itself. From this SO you can remove "some parts" if only need one month. So, the date-picker-range.html becomes

<div  class="drop-calendar" >
    <div  (click)="$event.stopPropagation()">
        <mat-calendar  class="calendar" #calendar (selectedChange)="select($event)"
             [dateClass]="setClass()" >
    </mat-calendar>
    </div>
</div>

Removing ngOnInit, ngAfterView, placeHolder... the result can be see in this stackblitz

Use more that one month ist's more complex because it's not only add two mat-calendar, the "header" must change. It's possible re-invent the weel but I'm not prety sure it's a good idea