如何在 React 的 material-ui 日期选择器中更改图标？

Question

我该如何更改Material UI日期选择器图标？

我在代码或文档的API部分中都没有找到它。

这里是他们文档的链接：https://material-ui.com/components/pickers/

import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = date => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

其他的功能都正常，我只需要将图像编辑为不同的图标。

- Matt Brody

---

这些是你想要查看的组件文档 https://material-ui-pickers.dev/api/KeyboardDatePicker - apachuilo

谢谢，我会查看这个！ - Matt Brody

Answer 1

首先，通过 Google Web Fonts 将 Material icon 字体包含到您的项目中:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

那么您需要这样导入 Icon 组件

import Icon from "@material-ui/core/Icon";

然后，在您的KeyboardDatePicker组件中包含'keyboardIcon'属性，方法是使用Icon组件将图标名称（字体连字号）包装起来，如下所示：

<KeyboardDatePicker
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      keyboardIcon={<Icon>add_circle</Icon>}
    />

如果您使用的是Font Awesome，则需要使用Icon组件的className属性提供类名称：

<KeyboardDatePicker
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={selectedDate}
      onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      keyboardIcon={keyboardIcon={<Icon className="fa fa-plus-circle" />}}
    />

- Uche Azinge

Answer 2

您可以在 <KeyboardDatePicker 组件中使用 keyboardIcon 属性。

<KeyboardDatePicker
                margin="normal"
                id="date-picker-dialog"
                format="MM/dd/yyyy"
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                    'aria-label': 'change date',
                }}
                keyboardIcon={<img src="https://.../calendar.png" alt="calendar" width="33px" height="33px"/>}
            />

你还可以在 keyboardIcon 属性中使用其他标签（不仅限于 <img />）：

• <svg>
• <Icon>（来自 Material UI）
• <div>
• 等等...

- Kateryna Baskina

Answer 3

我定制的共享UI import {Datepicker} from '@dwp/ui'

 <Datepicker
            fullWidth
            classes={classes}
            format="dd/MM/yyyy"
            minDateMessage=""
            maxDateMessage=""
            value={selectedDate}
            coloricon={$white}
            InputProps={{
              classes: {
                underline: classes.underline,
                disabled: classes.disabled,
              },
            }}
            onChangeDate={(value) => handleDateChange(value)}
            disabled
          />

来自`@dwp/ui`的共享日期选择器源代码

，保留HTML。

export function Datepicker(props) {
  const {
    minDate = new Date(),
    onChangeDate,
    value,
    classes,
    coloricon,
    InputProps,
    disabled,
  } = props
  const onChange = (payload) => onChangeDate(payload)

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={localeMap['au']}>
      <KeyboardDatePicker
        variant="inline"
        minDate={minDate}
        format="dd/MM/yyyy"
        margin="normal"
        placeholder="10/10/2018"
        onChange={(payload) => {
          onChange(payload)
        }}
        KeyboardButtonProps={{
          'aria-label': 'change date',
        }}
        value={value || minDate}
        keyboardIcon={
          <A.QueryBuilderIcon
            coloricon={disabled ? `rgba(255, 255, 255, 0.36)` : coloricon}
          />
        }
        className={classes.underline}
        InputProps={InputProps}
        disabled={disabled}
      />
    </MuiPickersUtilsProvider>
  )
}

A.QueryBuilderIcon = styled(QueryBuilderIcon)`
  color: ${(props) => props.coloricon};
`

- Anja Ishmukhametova

Answer 4

components = {{OpenPickerIcon : AccessAlarmIcon}}

//我已经在Material UI日期选择器中设置了AccessAlarmIcon图标，您可以更改和设置其他图标

- Ara Titanyan