Preventing Keyboard Input Events in MUI DatePicker

One of the admin features had a part where you select a date with MUI DatePicker,

and after an absurd date (1242-12-12) was typed in with the keyboard, the feature that fills in today's date with new Date() did not work properly.

Also, I did not think the range used when fetching currency information was large enough to need keyboard input, so I decided to block keyboard input itself.

You can block input by applying the code below to the DatePicker props.

1
2
3
4
5
6
7<DatePicker
	slotProps={{
	field: {
	readOnly: true,
		},
	}}
/>