How to validate a Date in ReactJS?

Sometimes, we require to take the date from the users' string format. So, users can make mistakes while entering the date value into the input field. So, we need to validate the date string at our end in the application code.

Below, we will learn various solutions to validate the date in ReactJs.

Use the Validator NPM Package

The Validator is an NPM package that contains various methods to validate strings. For example, it contains the isDate() method, and we can validate the date string with any delimiter separated. Also, it contains the methods to validate the email and phone numbers.

Users should use the below command to install the validator NPM package.

npm i validator

Syntax

Users can follow the syntax below to use the validator NPM package to validate the date string.

let isValid = validator.isDate(inputDate)

In the above syntax, the isValid variable will store the boolean value based on the isDate() method of the validator NPM package that validates the date.

Example

In the example below, we are using hooks to manage the dates. We have a text input to take a date as a text string. When a user enters any text in the input, it will automatically execute the handleDate() function, which sets a new value to the dateStirng variable, and validates the date using the isDate() method.

Also, users can observe how we change the color of the validation message based on whether the date is valid.

import React, { useState } from "react";
import validator from "validator";

const App = () => {
  const [dateString, setDateString] = useState("2023/01/27");
  const [message, setMessage] = useState(" ");
  const [messageColor, setMessageColor] = useState("green");

  function handleDate(event) {
    let inputDate = event.target.value;
    setDateString(inputDate);

    if (validator.isDate(inputDate)) {
      setMessage("Date is Valid");
      setMessageColor("green");
    } else {
      setMessage("Please, Enter a valid date!");
      setMessageColor("red");
    }
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the date
        <i> using the validator NPM package </i>
      </h2>
      <div style = {{ color: messageColor }}> {message} </div>
      <input type = "text" value = {dateString} onChange = {handleDate} />
      <div> You have entered the {dateString} in the input. </div>
    </div>
  );
};

export default App;

Output

Use the HTML date input

The HTML date input allows us to pick a date from the date picker. Also, we can set minimum and maximum date limits in the input tag, and that’s how we can validate the date in ReactJS using the HTML date input.

Syntax

Users can follow the syntax below to use the HTML date input to validate the date.

<input
   Type = "date"
   Value = {dateString}
   onChange = {handleDate}
   min = "2020-01-01"
   max = "2023-01-27"
/>

We used the min and max attributes in the above syntax to define the date range. Also, we have passed the “date” as a value of the type attribute to make the input field the date picker.

Example

In the example below, we used the input field, which works as a date picker for the users. So, we haven’t used any JavaScript to validate the date string, as HTML input validates the date itself. In the handleDate() function, we just set the new date value to the dateString variable.

import React, { useState } from "react";

const App = () => {
  const [dateString, setDateString] = useState("2023/01/27");

  function handleDate(event) {
    let inputDate = event.target.value;
    setDateString(inputDate);
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the date
        <i> using the HTML date input </i>
      </h2>

      <input
        type = "date"
        value = {dateString}
        onChange = {handleDate}
        min = "2020-01-01"
        max = "2023-01-27"
      />
      <div> You have selected the {dateString} date. </div>
    </div>
  );
};

export default App;

Output

Use the React Date Picker NPM package

The React date picker is a library to customize the date picker style and behaviour. It provides a wide range of features that developers can use according to the application's requirements.

Developers need to install the react date picker NPM package and import it to the project to use it. Developers should follow the below command to install the react date picker NPM module.

npm i react-datepicker --save  

Syntax

Users can follow the syntax below to validate the date using the react date picker NPM module.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
  <DatePicker selected={dateString} onChange={handleDate} />

We have imported the DatePicker component from the react-date picker library in the above syntax. Also, we have used that component in the code by passing various props.

Example

In this example, We have imported the date picker and CSS styling for it also. After that, we passed the dateString as a value of the selected prop and the handleDate() function as the value of the onChange prop.

In the output, users can observe the date picker styles. However, we can also pass some other props according to requirements. For example, date range, etc.

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const App = () => {
  const [dateString, setDateString] = useState(new Date());

  function handleDate(date) {
    let inputDate = date;
    setDateString(inputDate);
  }
  return (
    <div>
      <h2>
        {" "}
        Validate the date
        <i> using the React date picker </i>
      </h2>

      <DatePicker selected = {dateString} onChange = {handleDate} />
    </div>
  );
};

export default App;

Output

We learned to validate the date in this tutorial. In the first approach, we learned to valWe learned to validate the date in this tutorial. In the first approach, we learned to validate the custom date string separated by delimiter using the validator NPM package. In the second approach, we manage the date using the date input, and in the third approach, we use the react date-picker library.