How to prevent same start and end date selection

[Saif03]

Is there anyway to configure minimum span in between selected date range? e,g, for my use case start and end dates must be at least one day apart, so that users won't be able to select same day as both start and end date.

WRONG Behavior

CORRECT Behavior

similarly though I don't exactly need the opposite of this, but it will be cool if there is some way to configure maximum allowed span for date ranges? e.g. at maximum the number of days between start and end dates can be 7 days.

I'm not sure if we can use matDatepickerFilter here as I think its use is for only setting certain dates as disabled instead of setting certain dates off limit only while start date or end date selection.

If this is something not currently supported but can be added quickly, then perhaps someone can point me in the direction where this can be configured so I can open a PR.

[SaturnTeam]

Sorry. You can only validate after selection

[Saif03]

@SaturnTeam I have tried adding validation and programmatic incrementing end date by one day in such cases on dateChange event;

    validateRange() {
    const range = this.form.value.date;
    if (range) {
      const startDate = range.begin;
      const endDate = moment(range.end);
      if (moment(startDate).isSame(endDate, 'day')) {
        const newValue = { begin: startDate, end: endDate.add(1, 'day').toDate() };
        this.form.patchValue({ date: newValue });
      }
    }
  }

but doing this only updates the placeholder text and on opening the calendar it still shows the old date,

You can check this StackBlitz for further details.

[Saif03]

@SaturnTeam do you have any update regarding my last comment?

[JamesHearts]

It would be useful to put a "min" and "max" ranges on the date picker. For example maybe the user can not pick a range that is less than 7 days. Maybe it will show 7 days always highlighted starting from the first day selected.

[Saif03]

@JamesHearts exactly, and for inspiration this JQuery based date range picker supports configuring properties maxSpan and isInvalidDate which allows wiring similar behavior e.g.

maxSpan: { years: 2, months: 1 }

@SaturnTeam in the mean time is there any alternative way I can configure this at my end? can you have a look at my comment above?

[SaturnTeam]

@Saif03 Datepicker supports custom validation, but not on time when you selecting the second date.