So I have the following component but when the date picker opens up I see an error in the console about a missing anchorEl. I am not sure where I would assign that.

    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DatePicker
        label="Date"
        open={datePickerOpen}
        renderInput={(params) => {
          const currentDate = DateTime.fromJSDate(
            params.inputProps ? new Date(params.inputProps.value) : new Date()
          );

          return (
            <div ref={params.ref}>
              <input
                disabled={params.disabled}
                style={{ display: 'none' }}
                value={params.inputProps?.value}
                onChange={params.onChange}
                {...params.inputProps}
              />
              <button className="calendar-date-picker" onClick={() => toggleDatePicker()}>
                {currentDate.toFormat(`MMM dd, yyyy`)}
                <ArrowDropDownIcon sx={DatePickerDownArrowSx} />
              </button>
            </div>
          );
        }}
        value={new Date()}
        views={['month', 'day']}
        onChange={(newValue: Date | null) => handleDateChange(newValue)}
        onClose={() => toggleDatePicker()}
      />
    </LocalizationProvider>

CodePudding user response：

I think this issue is related to the missing reference to the element needed to let the popover appear. The popover should appear when clicking on the input, by default, but you can customize this behavior. In the code I can not see the inputRef property. Note that this key is not part of the inputProps, basically you have this { inputRef, inputProps, InputProps } as a parameter of the renderInput property related function.

I think you should add the ref property, something like

<input
  disabled={params.disabled}
  style={{ display: 'none' }}
  value={params.inputProps?.value}
  onChange={params.onChange}
  ref={params.inputRef}
  {...params.inputProps}
/>

Check this link for more information

https://mui.com/x/react-date-pickers/date-picker/#custom-input-component

Check also the line about <div ref={params.ref}>, probably there is no ref key in the params object. Probably what you wanted is <div ref={params.inputRef}>, or something like that.