React中为Material-UI InlineDatePicker输入框添加日历图标

Got it, let's tackle adding that calendar icon inside your InlineDatePicker input box. Here's a straightforward way to make it work exactly how you want:

First, make sure you have the Material-UI icons package installed (if you don't already):

npm install @mui/icons-material
# or
yarn add @mui/icons-material

Next, import the Calendar icon into your component file:

import CalendarIcon from '@mui/icons-material/Calendar';

Now modify your InlineDatePicker component to use the renderInput prop, which lets you fully customize the input field. We'll add the calendar icon as an end adornment, and wire it up to activate the input when clicked:

<InlineDatePicker
  label={"Start Date"}
  value={startDate}
  format={"MMM Do YYYY"}
  onChange={(e) => {this.handleDateChange(e, 'start')}}
  className={styles.dateInput}
  minDate={this.getMinDate(true)}
  maxDate={this.getMaxDate(true)}
  renderInput={(params) => (
    <TextField
      {...params}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <>
            {/* Keep the default adornments like clear button if they exist */}
            {params.InputProps.endAdornment}
            <IconButton
              onClick={() => params.inputRef.current.focus()}
              edge="end"
              sx={{ cursor: 'pointer' }}
            >
              <CalendarIcon />
            </IconButton>
          </>
        ),
      }}
    />
  )}
/>

What's happening here: #

• The renderInput prop lets us replace the default input with a custom TextField component, giving us control over its adornments.
• We preserve the original endAdornment (like the built-in clear button that comes with the date picker) so we don't lose any default functionality.
• The IconButton wraps our CalendarIcon, and its onClick handler triggers focus on the input field. This activates the date picker panel without altering the input's value, just like clicking directly on the input does.
• The sx prop adds a pointer cursor to the icon, making it clear to users that it's clickable.

This approach works seamlessly with the InlineDatePicker's existing behavior, and keeps the icon neatly inside the input box as requested.

内容的提问来源于stack exchange，提问作者Haq.H