How to create Date Picker in ReactJS?

The date picker allows users of the application to pick a date. If we take data in the string format from the users, they can make a mistake while entering the date and enter the wrong format of the date.

So, the best way to take a correct date input from the users is using the date picker. In this tutorial, we will use various libraries of ReactJS and create a date picker allowing users to pick any date, month, year, or decade.

Use the ‘react-date-picker’ NPM package

The react provides various libraries and npm packages to manipulate the date and time. The ‘react-date-picker’ is one of the best libraries allowing users to select a date.

Also, it provides various extra features to customize the date fields.

Before we start with the ‘react-date-picker’, we need to install it in our react project. Use the below command in the terminal inside the project directory.

npm i react-date-picker

Syntax

Users can follow the syntax below to use the react-date-picker.

import DatePicker from "react-date-picker";
<DatePicker onChange={onDateChange} value={dateValue} />

We have imported the DatePicker from the ‘react-date-picker’ in the above syntax. After that, we used the DatePicker in the react component. Also, we have added the onChange event in the DatePicker component.

Example 1

In the example below, we have imported the DatePicker from the react-date-picker. After that, we used the DatePicker component in our App.js file. The DatePicker component takes various props. We have passed the default date value to the component using the value props.

Furthermore, we have added an onChange event to the component to trigger the onDateChange() function whenever users select a new date. Also, we have used the useState hooks to handle the newly selected date values.

import React, { useState } from "react";
import DatePicker from "react-date-picker";

export default function App() {
   const [dateValue, onDateChange] = useState(new Date());

   return (
      <>
         <h2>
            Using the <i> react-date-picker </i> with the react functional
            components.{" "}
         </h2>
         <h3>Select any date from the below date picker.</h3>
         <div>
            <DatePicker onChange={onDateChange} value={dateValue} />
         </div>
      </>
   );
}

Output

Example 2

In this example also, we have implemented the date picker using the react-date-picker, but we have customized the date picker. Users can see that we have passed the different props to the DatePicker component.

The autofocus props allow us to focus automatically on the date picker and when the component mounts. Also, we have passed closeCalender props with the false boolean value to prevent closing the calendar when the user selects the date. Users need to click outside to close the calendar.

The className props allow us to pass the class to the child component and use the class name to style those components.

import React, { useState } from "react";
import DatePicker from "react-date-picker";

export default function App() {
   const [dateValue, onDateChange] = useState(new Date());
   const mystyle = {
      color: "blue",
      backgroundColor: "lightblue",
      padding: "2rem",
   };
   return (
      <>
         <div style={mystyle}>
            <h2>
               Using the<i>react-date-picker</i>with the react functional components.
            </h2>
            <div>
               <DatePicker
                  onChange={onDateChange}
                  value={dateValue}
                  autoFocus={true}
                  className="date-picker"
                  closeCalendar={false}
               />
            </div>
         </div>
      </>
   );
}

Output

In the above output, users can also observe how we have added styles to the webpage.

React-date-picker-props

Here, we will learn about some useful props which we can pass to the Datepicker component to customize the date.

• disabled − It allows us to disable the date picker.

• format − We can specify the input date format using the format props.

• isOpen − It allows you to set whether the calendar should be opened.

• maxDate − We can set the maximum limit of date selection using the maxDate props.

• minDate − We can specify the minimum limit to select the date.

• name − We can customize the name of the date picker using the name props.

• onChange − An event triggers whenever the user selects a new date value from the date picker.

• Value − It is the current value of the date.

Use the HTML input type = “date” with react to create a date picker

The HTML contains the <input>, which can take various types of inputs from the users, such as text, numbers, dates, etc. Here, will use the <input> tag to create a date picker.

Syntax

Users can follow the syntax below to use the HTML input to create a date picker.

<input
   type="date"
   value={date}
   onChange={onDateChange}
/>

In the above syntax, we bind the date value with the input and use “date” as a type to create a date picker using the input.

Example 3

In the example below, we have used the HTML input to create a date picker, as shown in the above syntax. Also, we used hooks to handle the date input. Whenever the user selects the date, it will call the onDateChange() function, and we are setting the date value to the date variable using the setDate() function.

import React, { useState } from "react";

export default function App() {
   const [date, setDate] = useState("none");
   const onDateChange = (event) => {
      setDate(event.target.value);
   };
   const mystyle = {
      color: "black",
      backgroundColor: "lightgrey",
      padding: "2rem",
      width: "700px",
   };
   const dateStyle = {
      backgroundColor: "red",
      width: "13.2rem",
      height: "2rem",
      fontSize: "1.5rem",
   };
   return (
      <>
         <div style={mystyle}>
            <h2>
               Using the <i>HTML date input </i> with the react functional components.
            </h2>
            The selected date is {date}
            <div>
               <input
                  type="date"
                  style={dateStyle}
                  value={date}
                  onChange={onDateChange}
               />
            </div>
         </div>
      </>
   );
}

Output

In the above output, users can observe the styles we have applied on the date input field. So, we can customize the style of the date input field as we customize the style of the normal HTML element.

Users can now understand why we should use react-date-picker rather than the HTML input. The HTML date input doesn’t contain the features to set minimum and maximum date limits or autofocus.

We learned to create a date picker using only HTML and react libraries in this tutorial. It is recommended to use the react libraries to create a date picker and to customize it more.