Unlocking the Power of Mui: Custom TimepickerToolbar with Default Time List of Items and Custom Design

When it comes to creating a user-friendly interface, having a customizable timepicker can make all the difference. Material-UI (Mui) provides an excellent Timepicker component, but sometimes, you need more control over its design and functionality. In this article, we’ll dive into the world of Mui’s TimepickerToolbar and explore how to create a custom Timepicker showing a default time list of items, along with a bespoke design that suits your application’s requirements.

Getting Started with Mui Timepicker

Before we begin, make sure you have Mui installed in your project. If you haven’t already, follow these simple steps:

npm install @mui/material @mui/lab

or

yarn add @mui/material @mui/lab

Now that you have Mui set up, let’s create a basic Timepicker component:

import { TimePicker } from '@mui/lab';
import { LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

export default App;

This code snippet creates a basic Timepicker component using Mui’s `TimePicker` and `LocalizationProvider` components. The `AdapterDateFns` is used to format the date and time.

Customizing the TimepickerToolbar

Now that we have a basic Timepicker component, let’s customize the TimepickerToolbar to display a default time list of items. We’ll create a new component called `CustomTimepickerToolbar`:

import { TimePickerToolbar } from '@mui/lab';
import { TextField } from '@mui/material';

const CustomTimepickerToolbar = (props) => {
  const { setOpen, open } = props;

  const defaultTimeList = [
    '09:00 AM',
    '09:30 AM',
    '10:00 AM',
    '10:30 AM',
    '11:00 AM',
    '11:30 AM',
    '12:00 PM',
    '12:30 PM',
    '01:00 PM',
    '01:30 PM',
    '02:00 PM',
    '02:30 PM',
    '03:00 PM',
    '03:30 PM',
    '04:00 PM',
    '04:30 PM',
    '05:00 PM',
    '05:30 PM',
  ];

  return (
    <TimePickerToolbar {...props}>
      <TextField
        variant="standard"
        value={defaultTimeList.join(', ')}
        onClick={() => setOpen(true)}
        sx={{ cursor: 'pointer' }}
      />
      </TimePickerToolbar>
  );
};

export default CustomTimepickerToolbar;

In this code, we’re creating a new component `CustomTimepickerToolbar` that extends the original `TimePickerToolbar`. We define a `defaultTimeList` array that contains the desired time list of items. We then use the `TextField` component to display the list of items, and add an `onClick` event to toggle the `open` state of the Timepicker.

Integrating the CustomTimepickerToolbar

Now that we have our custom `CustomTimepickerToolbar` component, let’s integrate it with our basic Timepicker component:

import { TimePicker } from '@mui/lab';
import { LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import CustomTimepickerToolbar from './CustomTimepickerToolbar';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        renderInput={(params) => <TextField {...params} />}
        ToolbarComponent={CustomTimepickerToolbar}
        toolbarFormat="12hour"
      />
    </LocalizationProvider>
  );
}

export default App;

In this updated code, we import our custom `CustomTimepickerToolbar` component and pass it as a prop to the `TimePicker` component using the `ToolbarComponent` prop. We also add the necessary state management for the `open` state of the Timepicker.

Customizing the Design

Now that we have our custom Timepicker with a default time list of items, let’s give it a bespoke design that suits our application’s requirements. We’ll create a new CSS file `styles.css`:

.MuiTimePickerToolbar {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.MuiTimePickerToolbar .MuiTypography-root {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.MuiTimePickerToolbar .MuiTextField-root {
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.MuiTimePickerToolbar .MuiTextField-root:hover {
  border: 1px solid #aaa;
}

In this CSS file, we’re targeting the `MuiTimePickerToolbar` component and adding custom styles to it. We’re changing the background color, padding, and border radius to give it a more modern look. We’re also customizing the typography and text field styles to fit our application’s design.

Putting it all Together

Now that we have our custom `CustomTimepickerToolbar` component and styles, let’s put everything together:

import React from 'react';
import { TimePicker } from '@mui/lab';
import { LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import CustomTimepickerToolbar from './CustomTimepickerToolbar';
import './styles.css';

function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        renderInput={(params) => <TextField {...params} />}
        ToolbarComponent={CustomTimepickerToolbar}
        toolbarFormat="12hour"
      />
    </LocalizationProvider>
  );
}

export default App;

In this final code snippet, we import our custom `CustomTimepickerToolbar` component and styles, and integrate them with our Timepicker component.

Conclusion

In this article, we’ve demonstrated how to create a custom Timepicker component in Mui, showcasing a default time list of items and a bespoke design. We’ve covered the basics of creating a custom Timepicker component, integrating it with a custom TimepickerToolbar, and customizing the design using CSS. With these techniques, you can create a Timepicker component that fits your application’s unique requirements.

Mui Component	Description
TimePicker	A material-ui component for selecting time
LocalizationProvider	A material-ui component for providing date and time formatting
AdapterDateFns	A material-ui adapter for date and time formatting using date-fns
TimePickerToolbar	A material-ui component for customizing the time picker toolbar
TextField	A material-ui component for text input

By following this tutorial, you should now have a solid understanding of how to create a custom Timepicker component in Mui, complete with a default time list of items and a bespoke design. Happy coding!

• Mui TimePicker Documentation
• Mui Picker Documentation
• Date-fns Documentation

Don’t forget to check out the official Mui documentation and date-fns documentation for more information on customizing the TimepickerHere are 5 Questions and Answers about “Mui: Custom TimepickerToolbar showing default time list of items and also the custom design”:

Frequently Asked Question

Got a question about customizing your TimepickerToolbar with Material-UI? We’ve got you covered!