Reactjs Material-UI Date-time picker component

Material UI Date-Time picker component:

Date and Time pickers are used for date-time selection. We can add these components if we are taking date and time inputs from the user.

Material-UI provides both date and time picker components that can be integrate to any reactjs project easily. In this post, I will show you how to use these components with examples.

YouTube video:

How to add this library:

Date-time picker is not included in material-ui/core. You need to install it separately. This is the website of this library, you will find all different examples and installation instructions.

Installation:

You can install this library by using npm or yarn:

npm i @material-ui/pickers

yarn add @material-ui/pickers

Internally, this library uses a date-time management library. You can use any date management library that you are familiar with among moment, date-fns 2, luxon and dayjs.

npm i @date-io/date-fns@1.x date-fns
// or
npm i @date-io/moment@1.x moment
// or
npm i -s @date-io/luxon@1.x luxon
// or
npm i -s @date-io/dayjs@1.x dayjs

For this post, we will use momentjs.

Example:

Let me show you a simple example

import React, { useState } from 'react';
import DateMomentUtils from '@date-io/moment';
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';

import './App.css';

function App() {
  const [currentDate, setCurrentData] = useState(new Date());
  return (
    <div className="App">
      <MuiPickersUtilsProvider utils={DateMomentUtils}>
        <DatePicker value={currentDate} onChange={setCurrentData} />
        <TimePicker value={currentDate} onChange={setCurrentData} />
        <DateTimePicker value={currentDate} onChange={setCurrentData} />
      </MuiPickersUtilsProvider>
    </div>
  );
}

export default App;

We are using DatePicker, TimePicker and DateTimePicker in this example. If you run it it will add three picker fields, on clicking you will see the pickers.

material date picker material time picker material date-time picker

Here,

  • DateMomentUtils is the date management library, i.e. momentjs. For other libraries, it will be different.

This is the basic of date and time pickers that we can use in Material-UI. You can go through the documentation page to learn more on other props and customizations.