Angular material datepicker limit the range selection

Question

I have an angular material date picker of ranges (start date and end date).

Currently, it is free-selection. Meaning, I can choose any start date and any end date. I'd like to change it a bit. I want it to limit up to 7 days difference. I do not want to allow the user to choose 2 dates with the difference in days is more than 7.

So inside the calendar: it looks something like this

As you can see, 5th October is the start date, and it allows us to choose 17th October as the end date. But I want the user to be limited to choose the end date only in the range of 5th October to 12th October (7 days difference maximum).

Is there a way?

This is my HTML:

<mat-form-field class="datepicker" appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="rangeForm" [rangePicker]="picker" [max]="maxDate">
        <input matStartDate formControlName="start" placeholder="Start date" readonly>
        <input matEndDate formControlName="end" placeholder="End date" readonly>
    </mat-date-range-input>

Typescript:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import * as moment from 'moment';

@Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
    private _startDate: moment.Moment = moment().subtract(6, 'days');
    private _endData: moment.Moment = moment();
    
    public maxDate: Date = this._endData.toDate();
    public rangeForm: FormGroup = new FormGroup({
        start: new FormControl(this._startDate.toDate()),
        end: new FormControl(this._endData.toDate()),
    });
    
    constructor() { }
    
    ngOnInit(): void {
    }
    
    /**
    * Getter for start date
    * @returns string
    */
    public getStartDate(): string {
        return this._startDate.format('DD/MM/YYYY');
    }
    
    /**
    * Getter for end date
    * @returns string
    */
    public getEndDate(): string {
        return this._endData.format('DD/MM/YYYY');
    }
    
}

Answer 1

Implementing a MatDateRangeSelectionStrategy,

We create a provider like

@Injectable()
export class MaxRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
    start: any;

    constructor(
        @Inject('rangeMax') private delta: number,
        private _dateAdapter: DateAdapter<D>
    ) {}

    selectionFinished(date: D, currentRange: DateRange<D>) {
        let { start, end } = currentRange;
        if (start == null || (start && end)) {
            start = date;
            end = null;
        } else if (end == null) {
            const maxDate = this._dateAdapter.addCalendarDays(start, this.delta);
            end = date ? date > maxDate ? maxDate : date : null;
        }

        return new DateRange<D>(start, end);
    }

    createPreview(activeDate: D | null, currentRange: DateRange<D>): DateRange<D> {
        if (currentRange.start && !currentRange.end) {
            const maxDate = this._dateAdapter.addCalendarDays(currentRange.start, this.delta);
            const rangeEnd = activeDate ? activeDate > maxDate ? maxDate : activeDate : null;
            return new DateRange(currentRange.start, rangeEnd);
        }

        return new DateRange<D>(null, null);
    }
}

You can use in directily in your component like

@Component({
  selector: "date-range-picker-selection-strategy-example",
  templateUrl: "date-range-picker-selection-strategy-example.html",
  providers: [
    {provide: 'rangeMax', useValue: 5},
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: MaxRangeSelectionStrategy
    }
  ]
})
export class DateRangePickerSelectionStrategyExample {}

But it's better create a Directive (don't forget declare in your module)

For this, first replace the constructor of the MaxRangeSelectionStrategy to remove the @Inject('rangeMax') and declare the variable delta:

  public delta: number; //<--get out of constructor and make public
  constructor(private _dateAdapter: DateAdapter<D>) {}

Now create the directive:

@Directive({
  selector: "[maxRange]",
  providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: MaxRangeSelectionStrategy
    }
  ]
})
export class MaxRangeDirective {
  constructor(
    @Inject(MAT_DATE_RANGE_SELECTION_STRATEGY)
    private maxRangeStrategy: MaxRangeSelectionStrategy<any>
  ) {}
  @Input() set maxRange(value: number) {
    this.maxRangeStrategy.delta = +value || 7;
  }
}

And use in the .html

<mat-date-range-picker maxRange=5 #picker></mat-date-range-picker>

At last, We can add in styles.scss a .css like

.mat-calendar-body-preview-end> .mat-calendar-body-cell-content {
  background-color: rgba(0, 0, 0, 0.04)!important;
}

To mark as selected the last element

See the stackbliz

Update if we has a mat-calendar. the approach is different. Only we need use the dateClass property.

<mat-calendar #cal name="fecha" 
              [selected]="fecha" 
              (selectedChange)="fecha=$event;redraw(cal)"
              [dateClass]="dateClass">
</mat-calendar>

Where, e.g.

dateClass=(date: any) => {
  const days =
    (date.getTime() - this.fecha.getTime()) / (24 * 60 * 60 * 1000);
  return days >= 0 && days < 5 ? 'red' : null;
};

redraw(cal:MatCalendar<any>)
{
    cal.updateTodaysDate() 
}

And we has in styles.css

.mat-calendar-body-cell.red {
    background: red;
}