CODEWITHSUNDEEP
angularangular-materialangular10
Snowman
Snowman

Reputation: 2495

Angular material 10: Making a Date range picker open-ended

One of the noteworthy changes in Angular 10 was the oft-requested feature of date range selection: https://material.angular.io/components/datepicker/overview#date-range-selection

It enables you to select a start date and an end date in the same picker.

I want to use this input in a form I need, in order to filter records from a database. However, per requirements, I should be able to leave either the start date or the end date unspecified. So, I should be able to cover all the following example scenarios:

  1. 15 May 2020 to 30 June 2020: Select all records with dates in the given range
  2. Unspecified to 30 June 2020: Select all records with dates up to 30 June.
  3. 15 May 2020 to Unspecified: Select all records from 15 May onwards.

Accomplishing case 1 is pretty easy. I'm not sure how to go about accomplishing case 2 and 3.

Can anyone help?

Upvotes: 2

Views: 464

Answers (1)

Antoniossss
Antoniossss

Reputation: 32517

Just conditionally set [min] and [max] on related inputs. Setting those on input elements will effectively limit selection options in the datepicker

Upvotes: 1

Related Questions