[DatePicker] Can't see date view for the month in which all the dates are disabled with shouldDisableDate

[NikitaGimon]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The user selects the month/year with all dates disabled in this month/year and material ui redirects the user to the "date" view with the closest enabled date.

I have enabled dates:

I click on the datepicker:

I want to change the date to see even disabled dates in 2019 year

I click on 2019 year and I'm redirected to the closest enabled 2020-09-30

Code:
`
export const SnapshotDatePicker = ({handleCloseDialog, snapshotDatesList, changeSnapshotDate}) => {
const [date, changeDate] = useState(new Date());

const disableDates = date => {
	const mappesSnapshotList = snapshotDatesList.map(el => el.snapshotDate);
	return !mappesSnapshotList.includes(formatDateAPI(date));
};

const handleChangeDate = () => {
	const formattedDate = formatDateAPI(date);
	if (formattedDate === formatDateAPI(date)) {
		changeSnapshotDate(snapshotDatesList.find(el => el.snapshotDate === formattedDate)?.snapshotDate);
		handleCloseDialog();
	}
};

return (
	<Dialog open={true} onClose={handleCloseDialog}>
		<DialogTitleContainer>
			Choose Snapshot <CrossIcon onClick={handleCloseDialog} />
		</DialogTitleContainer>
		<DatePickerContainer>
			<MuiPickersUtilsProvider utils={DateFnsUtils}>
				<ThemeProvider theme={materialTheme}>
					<DatePicker
						variant="static"
						shouldDisableDate={disableDates}
						openTo="date"
						value={date}
						views={['year', 'month', 'date']}
						onChange={e => {
							changeDate(e);
						}}
					/>
				</ThemeProvider>
			</MuiPickersUtilsProvider>
		</DatePickerContainer>
		<DialogActionsStyled>
			<ButtonCancel onClick={handleCloseDialog} type="button">
				Cancel
			</ButtonCancel>
			<ButtonConfirm onClick={() => handleChangeDate()} type="submit">
				Confirm
			</ButtonConfirm>
		</DialogActionsStyled>
	</Dialog>
);

};

SnapshotDatePicker.propTypes = {
snapshotDatesList: PropTypes.array,
handleCloseDialog: PropTypes.func,
changeSnapshotDate: PropTypes.func,
};
`

Expected behavior 🤔

Want to see date view also for disabled dates. Click on 2019 and see 2019 dates even if they are disabled

Steps to reproduce 🕹

Steps:

1. Import DatePicker
2. Disable all dates from the chosen month
3. Try to see this month as a date view choosing year
4. You will be redirected to the date view with the available (not disabled) date

Context 🔦

We need to create a Datepicker to choose the date from an array of available dates. The rest of the dates (which are not in this array of available) need to be disabled.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[flaviendelangle]

Hi

This relates to #4814 and #4834

You should be able to disable the month / year entirely in the month / year pickers with the props shouldDisableMonth and shouldDisableYear.

And in #4814 we will improve the default behaviors when shouldDisableMonth is not provided and all days within the targets month are disabled. We will show the target month but without changing the selected date (same for years).
This behavior is touchy so we are taking some time to make sure everything is working fine.

I hope it will solve your problem.

[flaviendelangle]

Closing this one
Fixed by #4814