Datepicker how to disable dates based on other datepicker

I am interested on blocking or disabling dates from calendar based on another date picker.
I have 2 datepickers start_date and end_date. My goal is:

  1. When I select start_date, all dates before must be disabled in end_date datepicker
  2. If I select end_date first, all dates after end_date date picker must be disabled for start_date picker

Please let me know your comments

Hello @eiffela65, and sorry for the long delay :confused:

So there are two ways you can do this. The first is to use the date range picker component instead, which has this functionality built in. But if you're set on using two date pickers, the date picker component has two settings that you can use:

  • Minimum date
  • Maximum date

If you fill the appropriate one in with the value of your other date picker component (and vice versa), that should work.

Here's an example - I set the maximum date of the "Start" date picker to be the value of the "end" date picker (or a date very far in the future if the end picker has no value).

Let me know if this helps!