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

Question

I'm using a Datepicker for a project. I want to add a custom information button in the top right corner of the calendar, example shown in the image below

Didn't find anything useful in the docs , maybe you could help, if this is possible to do and how.

--- EDIT ---

I added as suggested a button which I want to put on top of the calendar, the code of the button:

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>

But it doesn't show on top of the calendar. I tried to play with various values of the z-index for the button, but with no success. Any ideas how can I put it on top of the calendar?

--- EDIT 2 ---

As Ibrahim supposed, I'm trying to render a custom toolbar for this matter using 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>
)}

But it throws an error:

× TypeError: Cannot read property 'trackMetric' of null

I'm super lost, also there is no documentation on this DatePickerToolbar, I needed to specify the whole path for it to make it stop complaining that it doesn't finds it in the @material-ui/pickers package. Is there any valid toolbar I can use for this matter?

Answer 1

You can replace the toolbar by a custom toolbar, just replace the default component by the new one with your new element

ToolbarComponent

see the doc

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



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

Answer 2

This was a little bit tricky but I eventually ended up doing something like this:

Using the ToolBarComponent attribute

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

Also, needed to make a component CustomToolBar to override the default toolbar. Means I need to render the date by my self ( This is for hebrew version ):

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

Hope it helps for people who also seek similar result.

Answer 3

Add it next to DatePicker component, and position it over the datepicker with CSS.