How to Create Date and Time Picker in React Application

In this article, we will learn how to create a Date and Time Picker in React Application using Material UI.

Prerequisites of React

• Familiarity with the HTML, JavaScript.
• node.js installed
• Basic knowledge of React JS
• Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Datetimepicker.js'. We will create a simple modal popup using material UI. Import the following component from Material UI in the Datetimepicker.js file.

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

function datetime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker label="Basic date picker" />
      </DemoContainer>
    </LocalizationProvider>

  )
}

export default datetime

Now, import the Datetimepicker.js component in the src/App.js file.

import './App.css';
import Datetime from './datetime'
function App() {
  return (
    <div className="App">
      <Datetime/>
    </div>
  );
}

export default App;

Create TimePicker

Now right-click on the src folder and create a new component named 'timepicker.jsx'. We will create a simple modal popup using material UI. Import the following component from Material UI in the timepicker.jsx file.

import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';

Now, add the following code to the timepicker.jsx file.

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';

function Timepicker() {
  return (
    <div className="container mt-5">
    <h2> How to Create Date and Time Picker React Application</h2>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker']}>
        <TimePicker 
          label="With Time Clock"
          viewRenderers={{
            hours: renderTimeViewClock,
            minutes: renderTimeViewClock,
            seconds: renderTimeViewClock,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
    </div>
  )
}

export default Timepicker

Now, import the timepicker.jsx component in the src/App.js file.

import './App.css';
import Timepicker from './timepicker'
function App() {
  return (
    <div className="App">
      <Timepicker/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating Datepicker and timepicker in React applications using the Material UI library.