Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Style And Customize MUI DatePicker

The date picker is an essential component in many web and mobile applications, allowing users to conveniently select dates for booking events, choosing delivery times, and various other use cases. The Material UI (MUI) framework offers React developers an elegant and fully-featured date picker module to integrate into their projects.

The Material UI (MUI) component library offers many stylish and customizable components for building React applications. Among them is an easy-to-use yet highly configurable DatePicker component. With MUI v6 and its adherence to Material Design standards, developers can easily incorporate DatePickers into their projects and tailor them to specific styling and functionality needs.

This article explores the various options available for customizing the MUI DatePicker. It will cover the basic styling capabilities as well as the more advanced configuration of the component’s display, events, validation, localization, and date formatting.

Whether you simply want to change the DatePicker colors and fonts or modify its underlying behavior, this guide aims to provide the necessary steps and code examples to achieve your desired implementation.

Follow along to learn how to adapt the component to seamlessly integrate into your application’s UI.

By the end, you will know how to style and configure MUI v6 DatePickers to suit the unique requirements of any React project. The flexibility and customization potential are extensive with the proper techniques.

If you use MUI for your project, consider using Purecode.ai Marketplace to access over 10000+ AI-generated ready-made templates and components for MUI, TailwindCSS, and CSS3 to speed up your development process.

Let’s dive right in 🚀

What is MUI?

Material-UI (MUI) is a popular React UI framework that provides a set of pre-designed components following the Material Design guidelines. It simplifies the process of building aesthetically pleasing and responsive user interfaces. It provides you with pre-built robust, customizable, and accessible React components that can be used to build your design system and develop your web applications faster.

MUI was started in 2014 by Hai Nguyen and since then, it has experienced significant growth, boasting 89k+ stars on GitHub, 1.5M+ weekly downloads, with a small bundle size of 93.7kB (Minified+ Gzipped).

Implementing Material UI MUI Date Picker Component

Now you understand what Material UI library is, its significance, and why it is a preferred choice for most developers. Let us learn how to install React and the MUI library.

Prerequisite

Before creating a Material-UI Date Picker, you need to have the following:

  • NPM is installed on your machine.

  • Basic knowledge of JavaScript and React.

If you need help getting started with React, check out the video tutorial below.

Setting up a React App

In your terminal, enter the following command to create a new React application:

npx create-react-app my-app && cd my-app

Once your app is set up, run the application by entering either of these commands in your terminal:

yarn start

Or using npm:

npm start

Your server should launch in your browser at http://localhost:3000/.

How to Install Material UI

To get set up with MUI we can install it as an NPM package or use Yarn.

npm install @material-ui/core

or

yarn add @material-ui/core

Once the MUI library is successfully installed, you are all set to start using the Material UI components in your React application.

Understanding the MUI X DatePicker Component

The MUI X DatePicker is a component that allows users to select a date. It is part of the MUI X library, which provides more complex components for advanced use cases.

At its core, the MUI X DatePicker presents an interactive calendar view for date selection. However, it can incorporate several customizable sub-components for adapting to various device sizes and input modes. For example, dedicated view layouts tailored for mobile, desktop, or keyboard entry improve accessibility.

Localization enables the date picker text and calendar to reflect different locales and languages. The date library powering the module handles converting and formatting the dates accordingly. As with all MUI modules, styling and customizing every visual aspect is facilitated to align with branding needs.

MUI X DatePicker is one of the date and time pickers that support error handling, help you save time, and are mobile-friendly. It has the following components:

Date picker is a component to allow users to select a specific date, or a range of dates by picking the interval on the numbered grid, which is a month by default.

While calendar is a complex template based on a Gantt chart, aimed to let users manage their timeline of tasks, events, or other plans.

If you would like to skip ahead and just dive into learning through video tutorial, I have included this YouTube video tutorial below:

Installation of MUI DatePicker

Using your favorite package manager, install:

  • @mui/x-date-pickers for the free community version or @mui/x-date-pickers-pro for the commercial version.

  • The date library to manipulate the date. This can either be date-fns, luxon, moment, or dayjs

Developers can explore the specific date libraries to assess which one best suits the requirements of their project before selecting a date adapter for the MUI module. As the date libraries handle much of the underlying logic, the integrations abstract a lot of complexity away from the application code.

Additionally, the MUI Date Pickers have a peer dependency on the MUI Material library for handling styling and ensuring thematic consistency. So it needs to be installed and incorporated properly for flexible customization of styles. The MUI documentation provides the necessary installation commands to set this up seamlessly using NPM or Yarn.

npm install @mui/x-date-pickers

// Install date library (if not already installed)
npm install dayjs

If you are not already using it in your project, you can install it with the following:

# with npm
npm install @mui/material @emotion/react @emotion/styled
# with yarn
yarn add @mui/material @emotion/react @emotion/styled

How to Setup Your Date Library Adapter

Properly configuring the date localization context is vital for MUI Date Pickers to function correctly. The LocalizationProvider component establishes this configuration to make localization data available across Date Pickers in the React component hierarchy.

Typically, the LocalizationProvider should wrap the entire root application component in your code. Under the hood, it receives the chosen date library adapter instance, like AdapterDayjs or AdapterDateFns, and manages to make that available through the React context.

Although examples may show LocalizationProvider wrapping each Date Picker, this redundant pattern should be avoided. Declaring it once at the application root allows all child Date Picker components to seamlessly access the localization tools from the adapter. This approach prevents boilerplate repetition and complexity down the tree.

import React from "react";
import ReactDOM from "react-dom";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import "./index.css";
import App from "./App";

ReactDOM.render(
 <React.StrictMode>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
   <App />
  </LocalizationProvider>
 </React.StrictMode>,
 document.getElementById("root"),
);

Available Components for MUI X DatePicker

The component is available in four variants:

  • The DesktopDatePicker component works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.

  • The MobileDatePicker component works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.

  • The DatePicker component renders DesktopDatePicker or MobileDatePicker depending on the device it runs on.

  • The StaticDatePicker component renders without the popover/modal and field.

Rendering Your First Component

After installing MUI Date Pickers and configuring the localization context, rendering a basic date picker is simple.

For example, you can import the MobileDatePicker component from the MUI package and render it inside a div. This displays a mobile-optimized date selection interface for touch devices.

The surrounding div applies some styles for demonstration, but these aren’t necessary for core functionality.

With just a few lines of code, you can already start experimenting with date picking without needing much boilerplate. Play around with selecting different dates and opening the picker to verify it works as expected.

At this point, you have successfully integrated the basics of an MUI date picker. You can start hooking into value changes and thinking about customizations needed for your application. As the examples show, MUI makes even initial date picker integration quick and seamless.

import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";

function App() {
 return (
  <div className="App">
   <MobileDatePicker />
  </div>
 );
}
export default App;

How to Migrate from @material-ui/pickers

To migrate from @material-ui/pickers to @mui/x-date-pickers, you need to install the @mui/x-date-pickers package if it’s not already installed.

# with npm
npm install @mui/x-date-pickers

Before:

import { KeyboardDatePicker } from '@material-ui/pickers';
<KeyboardDatePicker />

After:

import DatePicker from '@mui/x-date-pickers';
<DatePicker />

In previous versions, developers had to work with MuiPickersUtilsProvider and manually install third-party date-io adapters. The latest MUI Date Pickers package simplifies the setup by replacing MuiPickersUtilsProvider with LocalizationProvider.

LocalizationProvider now handles automatically wiring up the required date adapters for various libraries behind the scenes. So there is no longer a need to separately install additional date-io packages as dependencies.

The updated LocalizationProvider abstraction and bundled adapters streamline bootstrapping MUI Date Pickers. Developers can get started faster without an adapter setup ceremony. Underlying integrations with date libraries remain configurable while removing the redundancy of explicit installations.

LocalizationProvider replaces the old MuiPickersUtilsProvider pattern by encapsulating the date adapter handling directly within MUI Date Pickers. This reduces the initial configuration and avoids managing separate date-io packages.

import AdapterDateFns from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
function App() {
 return (
  <MuiPickersUtilsProvider dateAdapter={AdapterDateFns}>
   ...
  </MuiPickersUtilsProvider>
 )
);

After:

import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
import LocalizationProvider from '@mui/x-date-pickers/LocalizationProvider';
function App() {
 return (
  <LocalizationProvider dateAdapter={AdapterDateFns}>
   ...
  </LocalizationProvider>
 )
);

Default date picker

Advantages of Using the MUI X DatePicker Component

Here are some advantages of using MUI X DatePicker:

Consistent look and feel: MUI/material-ui-pickers align with Material Design guidelines to ensure a consistent look and feel across applications.

Clock view: The Material UI Date/Time picker is the only component on a list of React date pickers that has a clock view. This makes it easy to pick the time in both desktop and mobile views.

Responsiveness: Each picker is available in a responsive, desktop, and mobile variant. The responsive component renders the desktop or mobile component depending on the device it runs on.

Customization: There are multiple examples of how to customize the date pickers and their subcomponents.

Validation and Localization: There is documentation about validation and localization.

How to Use MUI Time Picker

The Time Picker component lets the user select a time. Time pickers allow the user to select a single time. Time pickers allow the user to select a single time (in the hours:minutes format). The selected time is indicated by the filled circle at the end of the clock hand.

Basic Time Picker

<TimePicker label="Basic time picker" />

Composition of the Time Picker Component

The component is built using TimeField for keyboard editing, DigitalClock for desktop view editing, and TimeClock for mobile view editing. All the documented props of those two components can also be passed to the Time Picker component.

<TimePicker
  label="Uncontrolled picker"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<TimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Basic example of time keeper component

📝NOTE

The value is controlled when its parent manages it by providing a value prop. The value is uncontrolled when it is managed by the component’s internal state. This state can be initialized using the defaultValue prop.

Available Components for the TimeKeeper Component

The component is available in four variants:

  • The DesktopTimePicker component works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.

  • The MobileTimePicker component works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.

  • The TimePicker component which renders DesktopTimePicker or MobileTimePicker depending on the device it runs on.

  • The StaticTimePicker component renders without the popover/modal and field.

FAQs

Does MUI have a date picker component?

Yes, MUI v6 offers robust and customizable date picker components that integrate with the Material UI design system for React apps. These replace the now archived material-ui-pickers library.

What date formats are supported by MUI DatePicker?

The MUI DatePicker format prop allows customizing the display and input formats using combinations of YYYY, MM, DD, etc. Popular presets like “MM/DD/YYYY” are available, along with support for various international formats.

How can I add a date picker in my MUI app?

Import a date picker component like DatePicker or DateTimePicker from @mui/x-date-pickers, wrap it in a LocalizationProvider, and render it with props like the initial date value and onChange handler.

What are some ways to customize an MUI DatePicker component?

  • Style colors, fonts, borders, etc. using CSS classes and the sx prop

  • Customize calendar layout and sub-components with slots

  • Add icons, adornments, and custom event handling

  • Validate with constraints like disabled dates and date ranges

  • Localize strings and format dates to suit the region

  • Allow keyboard selection and navigation for efficiency

If you still want to explore more information about the MUI DatePicker, check this YouTube video tutorial below:

Tabular Comparison of Different Methods for Styling and Customizing MUI DatePickers

MethodProsCons
Basic Styling– Simple to implement – Change colors, fonts, etc– Styles lost on build
– Not reusable
Advanced Styling Techniques– Customize layout structure
– Reusable component styling
– More complex code
Handling Date Picker Events– Easy to add interactivity
– Attach callbacks
– Need to manage state
Validation– Built-in validation props
– Guidance for users
– Additional logic required
Localization– Support various locales
– Localized strings
– Setup required
Custom Formatting– Tailor date display format
– Flexible formatting
– Limited predefined formats
Keyboard Support– Arrow key navigation
– Efficient input
– Only in specific components
Add Time Pickers– Seamless integration
– Shared validation and styling
– Increased complexity
Add Date Range– Easy range selection
– Range highlights
– Limited range types
Best Practices– Create reusable styles- Follow DRY principles– Subjective suggestions

The table above covers some of the main methods for styling date pickers in MUI v6, along with a high-level comparison of the advantages and disadvantages of each technique. The various options provide flexibility to adapt the date pickers to specific needs.

If you want to be a 5x developer and skip the hard part of building UIs from scratch, Purecode.ai has a no-fuss repository of 10,000+ custom-generated AI components for MUI, TailwindCSS, and CSS3. Consider using our AI-generated custom components today!

What You Have Learned

The versatile MUI DatePicker surpasses basic calendars by allowing you to craft customized, reactive, WAI-ARIA-compliant date selection experiences. It adheres to Material Design principles for aesthetically consistent UIs across devices. The attention to detail in its design and APIs makes incorporating date handling seamless without compromising on functionality or presentation.

Now that material-ui-pickers are deprecated, you have discovered how MUI v6 provides modern, customizable alternatives for React date picking. Leveraging MUI’s extensive design system and components, you can style beautiful DatePickers aligned to your app’s visual identity.

Through the various examples covering basic styling, advanced custom layouts, formatting, localization, and more, you have gained a comprehensive understanding of adapting DatePickers. The techniques span simple tweaks like colors and fonts to complex behaviors like keyboard selection and validation logic.

By the end, you have learned reusable patterns for building DatePickers tailored to the unique interaction and aesthetic needs of your users. You can apply this knowledge to craft intuitive calendar interfaces that simplify the date management across forms and workflows in your React apps.

With MUI v6’s toolkit and your new skills, you can replace material-ui-picker seamlessly while taking date picker UIs even further on the customization scale.

Further Readings

If you enjoyed reading this piece, be sure to check out these articles from our blog:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.