Custom Toolbar component

Reference: Rethinking the date picker UI

Is your feature request related to a problem? Please describe.

It is not, as far as I’ve searched for the “toolbar” in all the Issues.

Describe the solution you’d like

In order to create the DatePicker described in the referenced article, I’d like to be able to pass my own <Toolbar /> component in place of the default one, ideally with the currently selected date as a prop.

<DatePicker 
  ToolbarComponent={({ year, month, date }) => (<div>{year}</div><div>{month}</div>))
/>

Describe alternatives you’ve considered

I looked through Dialog and Popover documentations for more specific prop name instead of proposed ToolbarComponent, but this one seems self-descriptive enough, I guess.

[monteiz]

This is a basic implementation of a CustomToolbar that mimics the default behaviour. It can be further customised.

It may help someone.

import React, { useState } from 'react';
import PickerToolbar from "@material-ui/pickers/_shared/PickerToolbar";
import ToolbarButton from "@material-ui/pickers/_shared/ToolbarButton";
import { makeStyles } from '@material-ui/core';

export const useStyles = makeStyles({
	toolbar: {
		display: "flex",
		flexDirection: "column",
		alignItems: "flex-start"
	}
});

const CustomToolbar = function (props) {

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

	const handleChangeViewClick = (view) => (e) => {

		setOpenView(view);

	}

	const classes = useStyles();

	return (
		<PickerToolbar className={classes.toolbar} title={title} isLandscape={isLandscape}>
			<ToolbarButton
				onClick={handleChangeViewClick("year")}
				variant="h6"
				label={date.format("YYYY")}
				selected={openView === "year"}
			/>
			<ToolbarButton
				onClick={handleChangeViewClick("date")}
				variant="h4"
				selected={openView === "date"}
				label={date.format("LL")}
			/>
		</PickerToolbar>
	);

}

export default CustomToolbar;

[simromm]

How do you overload the ToolbarComponent with additionnal compoment?

Something like but I don’t know how to call the default toolbar:

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