Adding a custom button to DatePicker in material-ui

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

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 2

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 3

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