在material-ui中为DatePicker添加自定义按钮

Question

我正在为一个项目使用 Datepicker。 我想在日历的右上角添加一个自定义信息按钮，如下图所示

在docs 中没有找到任何有用的东西，也许你可以提供帮助，如果可以这样做以及如何做。

--- 编辑 ---

我按照建议添加了一个我想放在日历顶部的按钮，按钮的代码：

const useStyles = makeStyles({
  paper: {
    outline: 'none',
    padding: '10px',
    position: 'absolute',
    left: '50%',
    top: '50%',
    WebkitTransform: 'translate(-50%, -50%)',
    transform: ' translate(-50%, -50%)',
    width: 'auto',
    backgroundColor: 'white',
    textAlign: 'center',
  },
  infoButtonShown: {
    display: 'inline-flex',
    position: 'absolute',
    left: '50%',
    top: '50%',
    WebkitTransform: 'translate(-50%, -50%)',
    transform: ' translate(-50%, -50%)',
    color: 'black',
  },
  infoButtonHidden: {
    display: 'none',
    position: 'absolute',
    left: '50%',
    top: '50%',
    WebkitTransform: 'translate(-50%, -50%)',
    transform: ' translate(-50%, -50%)',
    color: 'black',
  },
});

<IconButton
    className={ isInfoOpen ? classes.infoButtonShown : 
                             classes.infoButtonHidden
              }>
    <InfoIcon fontSize="small" />
</IconButton>

但它不会显示在日历顶部。我尝试使用按钮的各种 z-index 值，但没有成功。有什么想法可以把它放在日历上吗？

--- 编辑 2 ---

正如 Ibrahim 所说，我正在尝试使用 ToolbarComponent 为这个问题呈现一个自定义工具栏：

import { DatePickerToolbar } from '@material-ui/pickers/DatePicker/DatePickerToolbar';

ToolbarComponent={(props) => (
    <div>
        <DatePickerToolbar {...props} />
        <IconButton
            className={
                isInfoOpen
                    ? classes.infoButtonShown
                    : classes.infoButtonHidden
            }
        >
            <InfoIcon fontSize="small" />
        </IconButton>
    </div>
)}

但它会引发错误：

× TypeError: 无法读取属性 'trackMetric' of null

我迷路了，这个 DatePickerToolbar 上也没有文档，我需要为其指定整个路径，以使其停止抱怨在 @material-ui/pickers 包中找不到它。 是否有任何有效的工具栏可供我使用？

Answer 1

您可以用自定义工具栏替换工具栏，只需用新元素替换默认组件即可

工具栏组件

见doc

import { ToolbarComponentDefault } from '@material-ui/pickers'



 <DatePicker 
  ToolbarComponent={(props) => (<div><ToolbarComponentDefault {...props /><OtherComponent /></div>))
/>

Answer 2

这有点棘手，但我最终做了这样的事情：

使用 ToolBarComponent 属性

ToolbarComponent={(props) => (
                <div>
                  <CustomToolbar {...props} />
                  <IconButton
                    className={
                      isInfoOpen
                        ? classes.infoButtonShown
                        : classes.infoButtonHidden
                    }
                    onClick={() => setInfoModalOpen(true)}
                  >
                    <InfoIcon fontSize="small" />
                  </IconButton>
                </div>
              )}

另外，需要制作一个组件CustomToolBar 来覆盖默认工具栏。意味着我需要自己呈现日期（这是希伯来语版本）：

const CustomToolbar = function(props: any) {


  const { date, isLandscape, openView, setOpenView, title } = props;

  const handleChangeViewClick = (view: any) => (e: any) => {
    setOpenView(view);
  };

  const classes = useStyles();
  const daysToHebrew = [
    "יום א'",
    "יום ב'",
    "יום ג'",
    "יום ד'",
    "יום ה'",
    "יום ו'",
    'שבת',
  ];
  const monthToHebrew = [
    "ינו'",
    "פבר'",
    'מרץ',
    "אפר'",
    'מאי',
    'יוני',
    'יולי',
    "אוג'",
    "ספט'",
    "אוק'",
    "נוב'",
    "דצמ'",
  ];

  return (
    <PickerToolbar
      className={classes.toolbar}
      title={title}
      isLandscape={isLandscape}
    >
      <ToolbarButton
        className={classes.h6ToolBar}
        onClick={handleChangeViewClick('year')}
        variant="subtitle1"
        label={date.getFullYear().toString()}
        selected={openView === 'year'}
      />
      <ToolbarButton
        onClick={handleChangeViewClick('date')}
        variant="h4"
        selected={openView === 'date'}
        label={`${daysToHebrew[date.getDay()]}, ${
          monthToHebrew[date.getMonth()]
        } ${date.getDate()}`}
      />
    </PickerToolbar>
  );
};

希望它对也寻求类似结果的人有所帮助。

Answer 3

将其添加到 DatePicker 组件旁边，并使用 CSS 将其放置在 datepicker 上方。