CODEWITHSUNDEEP
reactjsmaterial-ui
Thomas Chardon
Thomas Chardon

Reputation: 21

How to show minDate on open with MUI DatePicker?

I use react.js and have two MUI DatePicker components next to one another. One is to choose a deadline, the other to choose a date that can only be after the deadline. I've set the start component's minDate to the deadline's value so it's not possible to select a date prior to the deadline. That works, but the calendar always opens on the current month, even if minDate is several months later.

Is there a way to change the date on which the DatePicker calendar opens?

EDIT: Thanks to @Gucal's answer below I was able to find the solution. I guess I didn't read the documentation thoroughly enough before as I missed the defaultCalendarMonth prop. I simply put the deadlineValue as defaultCalendarMonth and it worked!

Upvotes: 0

Views: 2123

Answers (1)

Gucal
Gucal

Reputation: 923

First save the changes in DatePicker where you select the due date to a state. For the second DatePicker, give the month after the month in the state as defaultValue={}.

Example:

const [selectedDate, setSelectedDate] = useState();
 
//Then update the datepicker default value
defaultValue={Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1)}

Upvotes: 1

Related Questions