How to add DateTimePicker in ReactJS

Today we’ll show you how to add DateTimePicker in ReactJS. Here we’ll use the npm package to implement datetime picker in the React component.

React Datepicker Example, How to implement a DatePicker in React.js, React DateTimePicker Component, datepicker and timepicker in React JS, Step by step example of the datetimepicker, add datepicker in react application, react-datetime npm package.

Checkout more articles on ReactJS

Steps to add DateTimePicker in ReactJS

Setup react application
Install DateTime picker package for react
Integrate package to display DateTime picker
Output

1. Setup react application

Let’s start with creating a simple react application using `create-react-app`. Run the following command to create a react app.

npx create-react-app datetimepicker-react-app

2. Install DateTime picker package for react

In the next step, we have to install the dependency packages for datetime picker. For that we’ll install the react-datetime npm package. Run the following command to install it.

npm i react-datetime

We need to also install the moment npm package as a peer dependency for the react-datetime package. Run the code below to install the moment package.

npm i moment

3. Integrate package to display DateTime picker

To integrate datetime picker in the react app, we have to import the `react-datetime` and `moment` packages.

Also we have to import the css file for the datetime package. Check the following code.

App.js

import React, { useState } from 'react';
import DatePicker from 'react-datetime';
import moment from 'moment';
import 'react-datetime/css/react-datetime.css';

function App() {
  const [dt, setDt] = useState(moment());
  return (
    <div className="App">
      <h2>Datetime picker in ReactJS - <a href="https://www.cluemediator.com">Clue Mediator</a></h2>
      <DatePicker
        value={dt}
        onChange={val => setDt(val)}
      />
    </div>
  );
}

export default App;

Here we used the `useState` hook to manage the selected date. You can set the extra parameters in the datetime picker like dateFormat, timeFormat, style, etc.

App.js

import React, { useState } from 'react';
import DatePicker from 'react-datetime';
import moment from 'moment';
import 'react-datetime/css/react-datetime.css';

function App() {
  const [dt, setDt] = useState(moment());
  return (
    <div className="App">
      <h2>Datetime picker in ReactJS - <a href="https://www.cluemediator.com">Clue Mediator</a></h2>
      <DatePicker
        inputProps={{
          style: { width: 250 }
        }}
        value={dt}
        dateFormat="DD-MM-YYYY"
        timeFormat="hh:mm A"
        onChange={val => setDt(val)}
      /> <br />
      <div><b>Date:</b> {dt.format('LLL')}</div>
    </div>
  );
}

export default App;

4. Output

Run the above code and check in the browser.

Output - How to add DateTimePicker in ReactJS - Clue Mediator

Demo & Source Code

Github Repository StackBlitz Project