¿Cómo validar una fecha en ReactJS?

La validación de datos es un paso importante en cada aplicación para autenticar los datos ingresados ​​por el usuario que pueden usarse para calcular la fecha de nacimiento o cualquier otro uso. Se puede lograr usando el módulo de validación en ReactJS. El siguiente ejemplo muestra cómo validar los datos ingresados ​​por el usuario y verificar si son válidos o no utilizando el módulo npm en la aplicación ReactJS.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app datevalidatedemo

Paso 2: después de crear la carpeta de su proyecto, es decir , datevalidatedemo, acceda a ella con el siguiente comando:

cd datevalidatedemo

Paso 3: después de crear la aplicación ReactJS, instale el módulo de validación con el siguiente comando:

npm install validator

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código para validar la fecha con la interfaz de usuario básica.

import React, { useState } from "react";
import validator from 'validator'
  
const App = () => {
  
  const [errorMessage, setErrorMessage] = useState('')
    
  const validateDate = (value) => {
    
    if (validator.isDate(value)) {
      setErrorMessage('Valid Date :)')
    } else {
      setErrorMessage('Enter Valid Date!')
    }
  }
  
  return (
    <div style={{
      marginLeft: '200px',
    }}>
      <pre>
        <h2>Validating Date in ReactJS</h2>
        <span>Enter Date: </span><input type="text" 
        onChange={(e) => validateDate(e.target.value)}></input> <br />
        <span style={{
          fontWeight: 'bold',
          color: 'red',
        }}>{errorMessage}</span>
      </pre>
    </div>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

• El siguiente será el resultado si el usuario ingresa una fecha no válida como se muestra a continuación:

• El siguiente será el resultado si el usuario ingresa una fecha válida como se muestra a continuación: