Html Question posted in
Some basic documentation can be found here.

Html – I want to validate my input type time from the today date and after current time

<input type="date" onChange={(e)=>setDate(e.target.value)}/>
<input type="time" onChange={(e)=>setTime(e.target.value)} />

if the date is after today and time is after current time i want to show validation that "please select precious time" .

I want the validation on time and date.

Tags:

2

Answers


  1. 0

    You can achieve this by creating a new Date object with the current date and time, and then comparing it with the selected date and time.

    So your react component should look like the below:

    const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [error, setError] = useState("");

const handleDateChange = (e) => {
  const selectedDate = new Date(e.target.value);
  const currentDate = new Date();
  if (selectedDate.setHours(0,0,0,0) < currentDate.setHours(0,0,0,0)) {
    setError("please select precious time");
  } else {
    setDate(e.target.value);
    setError("");
  }
};

const handleTimeChange = (e) => {
  if (date) {
    const selectedDateTime = new Date(`${date}T${e.target.value}`);
    const currentDateTime = new Date();
    if (selectedDateTime.getTime() < currentDateTime.getTime()) {
      setError("please select precious time");
    } else {
      setTime(e.target.value);
      setError("");
    }
  } else {
    setTime(e.target.value);
  }
};

// In your render method
<input type="date" onChange={handleDateChange} />
<input type="time" onChange={handleTimeChange} />
{error && <p>{error}</p>}
    Login or Signup to reply.
  2. 0

    To achieve the mentioned, I would take this approach:

    import React, { useState } from 'react';

const DateTimeValidator = () => {

  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const [validationMessage, setValidationMessage] = useState('');

  const handleDateChange = (e) => {
    setDate(e.target.value);
    validateDateTime(e.target.value, time);
  };

  const handleTimeChange = (e) => {
    setTime(e.target.value);
    validateDateTime(date, e.target.value);
  };

  const validateDateTime = (selectedDate, selectedTime) => {
    const currentDate = new Date();
    const selectedDateTime = new Date(`${selectedDate}T${selectedTime}`);

    if (selectedDate && selectedTime && selectedDateTime > currentDate) {
      setValidationMessage('Please select previous time.');
    } else {
      setValidationMessage('');
    }
  };

  return (
    <div>
      <input type="date" onChange={handleDateChange} />
      <input type="time" onChange={handleTimeChange} />
      {validationMessage && <small>{validationMessage}</small>}
    </div>
  );
};

export default DateTimeValidator;

    Let’s go through the code above:

    handleDateChange updates the date state while handleTimeChange updates the time state, then calls validateDateTime to check the selected date and the time. Then, validateDateTime function constructs a Date object from the selected date and time strings, compares the selected date and time to the current one. It checks if the selected date and time are both in the future.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search