CODEWITHSUNDEEP
javascriptreactjsmaterial-uicalendar
Akshay S R
Akshay S R

Reputation: 173

Unable to disable keyboard date change in MUI DatePicker API

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?enter image description here,

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>

Upvotes: 17

Views: 24212

Answers (9)

beng_123
beng_123

Reputation: 163

If you want to disable the date text input but still be able to use the picker this is what worked for me MUI 5 and DatePickers 6

  <DatePicker
      disabled={disablePicker}
      sx={{ flexBasis: "2" }}
      value={selectedStartDate}
      onChange={handleDateChange}
      slotProps={{
        textField: {
          onKeyDown: (e) => {
            console.log("Key pressed on DatePicker input:", e.key);
            e.preventDefault();
          },
        },
      }}
    />

Upvotes: 0

Gee
Gee

Reputation: 1418

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);
          }
        }
      }
    }}
  />
);

Upvotes: 4

atwright147
atwright147

Reputation: 3811

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
            }
        }
    }}
/>

Upvotes: 0

Pelle Alstermo
Pelle Alstermo

Reputation: 81

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
                            }
                        }}
                    />

Upvotes: 8

Majid M.
Majid M.

Reputation: 4954

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} />
      )}
    />
)

Edit MaterialUIPickers Material Demo (forked)

Upvotes: 26

sandeep krishna
sandeep krishna

Reputation: 9

@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' } 
      }}
      />

Upvotes: 0

Duy Nguyen
Duy Nguyen

Reputation: 61

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

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

Upvotes: 6

atlanteh
atlanteh

Reputation: 5835

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}}
        />
    )}
/>

Upvotes: 15

T04435
T04435

Reputation: 13992

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'
              }
            }}
          />
        )}
/>

Upvotes: 4

Related Questions