React Datetime Picker with Example

in this tutorial, We’ll integrate the Date and Time component into the react application. The Datepicker component is the most used in any web application to the select DateTime.

React Datepicker

The react-datepicker package is used to create datatime selector into the react application. React datepicker is a simple and reusable component that can help you integrate the date and time picker with some custom functionality. If you need to use a locale other than the default en-US, you’ll also need to import that into your project from (date-fns).

Install React.js

Let’s create a react app using below command:

npx create-react-app react-data-sample
cd react-data-sample
npm start

Install All dependencies

Install react-datepicker using the following command.

npm install react-datepicker --save

We also install Moment.js separately since the dependency isn’t included in the package. The below command is used to install moment.js package.

npm install moment --save

Let’s install the bootstrap using the following command.

npm install bootstrap --save

The most basic use of the DatePicker can be:

<datepicker selected="{startdate}" onchange="{(date)" ==""> setStartDate(date)} />
</datepicker>

How To Add DatePicker

Added below code into our component src/App.js file.

// App.js
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
 
import 'react-datepicker/dist/react-datepicker.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <datepicker selected="{startDate}" onchange="{(date:Date)" ==""> setStartDate(date)} />
  );
};
</datepicker>

we have imported datpicker, moment, bootstrap libraries.

We have set the initial date to today’s date. The user can select the new data from the calendar, it will set the new state with its new values.

You can use onSelect event handler which fires each time some calendar date has been selected:

<datepicker selected="{date}" onselect="{handleDateSelect}" when="" day="" is="" clicked="" onchange="{handleDateChange}" only="" value="" has="" changed="">
</datepicker>

How To Select Time From Date picker

You can also include a time picker by adding the showTimeSelect prop.

<datepicker selected="{this.state.date}" onchange="{(date)" ==""> setStartDate(date)}
  showTimeSelect
  dateFormat="LLL" />
</datepicker>