how to get multiple inputs type date values to console with checking if empty

Question

I have six inputs type date, four of them are read-only. When I choose a date on the first one, I calculate that date and put the values on the read-only inputs, and I choose a date in the last input after that I click the button. I want to console.log() all of the dates, and get errors if the the inputs are empty.

As you can see in the picture, only the first and last dates are logged because the OnChange event is triggered, but I want to log the the other two in red too, and it's not working out with me

Here's what I have done:

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


export default function Test() {

  const [date, setdate] = useState({ date1: "", date2: "", date3: "", date4: "" });
  const [error, seterror] = useState("");



  const handleChange = (event) => {
    const value = event.target.value;
    setdate({
      ...date,
      [event.target.name]: value
    });
  }

  const handleClick = (event) => {
    event.preventDefault();
    if (date.date1 === "" || date.date4 === "") {
      seterror("error")

    } else {
      console.log("bye")
      seterror("")
      console.log(date)

    }
  };

  function addDays(date, days) {
    if (!date) {
      return ''
    } else {
      var result = new Date(date);
      result.setDate(result.getDate() + days);
      var res = moment(result).format("YYYY-MM-DD")
      return res;
    }

  }



  return (
    
      

        

          تاريخ القرار
          


          تاريخ النشر  

          
            
              

            
            
              
            
          
          فترة البحث العمومي  

          
            

              
            
            
              
            
          
          تاريخ الاجتماع
          
            
              

            

          
          
          
            {error &&  {error} }
          


        
      
    
  );
}

user_3820189 · Answer

Make changes in your state

const [date, setdate] = useState({date1:'', date2:'', date3: '', date4:''});

Then make following changes in your handleChange Event

const handleChange = (event) => {
        const selectedDate =    event.target.value
        setdate({
            date1: selectedDate,
            date2: addDays(selectedDate, 5),
            date3: addDays(selectedDate, 15),
            date4: addDays((addDays(date, 15)), 9),
        })
  }

Then make below changes in your inputs

First Input

Second Input

Third Input

Fourth Input

user_2902161 · Answer

An alternative quick solution would be to perform a check if date is defined / non-empty string before adding the days.

Or on the function level

function addDays(date, days) {
  if (!date) return '';
  ...
}

Otherwise, I'd make a small change in the condition statement in case you simply want to check if they're empty.

if (!isNaN(date.date1)||!isNaN(date.date2)) {

into

if (!date || !date.date1 || !date.date2) {

how to get multiple inputs type date values to console with checking if empty

2 Answers