Unable to disable keyboard date change in MUI DatePicker API

Question

Link to CodeSandBox : codesandbox.io/s/dl5jft?file=/demo.tsx

I don't want users to Edit dates via keyboard, I want them to select dates from date picker modal, how to disable this?,

i used the ReadOnly prop but it is disabling date selection itself, please help when i did readOnly, it is disabling the whole input, which made me unable to open the modal to select the date

    <GlobalStyle />
      <CalendarContainer>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DatePicker
            value={calendarVal}
            onChange={(newValue) => {
              handleChange(newValue);
            }}
            disabled={disabled}
            inputFormat="dd-MM-yyyy"
            renderInput={(params) => (
              <TextField
                // eslint-disable-next-line react/jsx-props-no-spreading
                {...params}
                name={name}
                error={error}
                disabled={disabled}
              />
            )}
          />
        </LocalizationProvider>
      </CalendarContainer>

Anestassia

Could you share your code in codesandbox? – Watthour

Hey @MajidM. here is codesandbox.io/s/dl5jft?file=/demo.tsx i want to disable keyboard editing of the calendar only modal picking should be allowed – Anestassia

Answer 1

For preventing user keyboard actions, you can set the functionality of the onKeyDown event to preventDefault and assign it to TextField:

 const onKeyDown = (e) => {
    e.preventDefault();
 };

return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <Stack spacing={3}>
    <DesktopDatePicker
      label="Date desktop"
      inputFormat="MM/dd/yyyy"
      value={value}
      onChange={handleChange}
      renderInput={(params) => (
        <TextField onKeyDown={onKeyDown} {...params} />
      )}
    />
)

Watthour

Yes, its working fine – Plasmagel

Answer 2

For me, in latest @mui 5, the other solutions weren't working properly. The only solution that worked for me is:

<DatePicker
    dateAdapter={AdapterDateFns}
    renderInput={(params) => (
        <TextField
            {...params}
            inputProps={{...params.inputProps, readOnly: true}}
        />
    )}
/>

Cannular

Answer 3

For @mui/x-date-pickers": "^6.1.0":

<DatePicker      
    slotProps={{
        textField: {
            readOnly: true,
        },
    }}
/>

Payday

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Liggins

Answer 4

In the documenation for @mui/x-date-pickers 6.16 for slot https://mui.com/x/api/date-pickers/date-picker/#slots you can read that field: Component used to enter the date with the keyboard. https://mui.com/x/api/date-pickers/date-picker/#DatePicker-slots-field.

In my case where i want to disable keyboard input but still have datepicker valid. I added slotProps={{field:{readOnly:true}}

                  <DatePicker
                        label={label}
                        value={value}
                        onChange={onChange}
                        format="yyyy-MM-dd"
                        slotProps={{
                            field: {
                                readOnly: true
                            }
                        }}
                    />

Psilocybin

Answer 5

I have done 2 things to solve this:

1- set render input TextField to readOnly => no typing

2- add sx of TextField caretColor: 'transparent' => hide the caret

<DatePicker
  renderInput={params => (
          <TextField
            {...params}
            InputProps={{
              readOnly: true,
            sx={{
              "& .MuiInputBase-input": {
                caretColor: 'transparent'
              }
            }}
          />
        )}
/>

Melson

Answer 6

For future lost souls looking to do the same thing, I spent some time to make it work as (what appears to be) a single button with the right cursor and everything. I hate keyboard-editable dates, and I hate clickable items that have a text cursor!

const [datePickerOpen, setDatePickerOpen] = useState<boolean>(false);
return (
  <DatePicker
    value={new Date()}
    sx={{
      input: {
        cursor: 'pointer',
      }
    }}
    open={datePickerOpen}
    onClose={() => setDatePickerOpen(false)}
    slotProps={{
      textField: {
        inputProps: { readOnly: true },
        onClick: () => {
          if (!datePickerOpen) {
            setDatePickerOpen(true);
          }
        }
      }
    }}
  />
);

Spinner

Answer 7

@mui/x-date-pickers 6 above, renderInput is deprecated

      const disableKeyboardEntry = (e: any) => {
         if (e?.preventDefault) { 
        e?.preventDefault();
        e?.stopPropagation();
    }
}

    <DatePicker 
         views={['year']}
         label={'From'}
         minDate={moment('1990', 'YYYY')}
         maxDate={moment().endOf('year')}
         slotProps={{ 
         textField: { 
         onBeforeInput: disableKeyboardEntry, 
           
        variant: 'standard' } 
      }}
      />

Peptidase

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Liggins

Answer 8

In MUI X v5, you can make the DatePicker field readonly (only allowed to select via the picker) as follows:

<DatePicker
    slotProps={{
        textField: {
            inputProps: { // not InputProps
                readOnly: true
            }
        }
    }}
/>

Janettajanette