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

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. How can I achieve all of this.

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:"",});
  const [error, seterror] = useState("");



  const handleChange = (event) => {
    setdate(event.target.value)
  }

  const handleClick = (event) => {
    event.preventDefault();
    if (!isNaN(date.date1)||!isNaN(date.date2)) {
      seterror("error")
      
    }else{
      
      seterror("")
    }
  };

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



  return (
    <div>
      <div className="widget widget-chart-one">

        <form>

          <label>تاريخ القرار</label>
          <input type="date" className="form-control" name="date1" onChange={handleChange}
          />
          

          <label>تاريخ النشر  </label>

          <div className="form-group row  mb-6">
            <div className="col-sm-6">
              <input type="date" className="form-control" value={date} readOnly />

            </div>
            <div className="col-sm-6">
              <input type="date" className="form-control" value={addDays(date, 15)} readOnly/>
            </div>
          </div>
          <label >فترة البحث العمومي  </label>

          <div className="form-group row  mb-6">
            <div className="col-sm-6">

              <input type="date" className="form-control" value={addDays(date, 15)} readOnly />
            </div>
            <div className="col-sm-6">
              <input type="date" className="form-control" value={addDays((addDays(date, 15)), 9)} readOnly/>
            </div>
          </div>
          <label>تاريخ الاجتماع</label>
          <div className="form-group row  mb-10">
            <div className="col-sm-12">
              <input type="date" className="form-control" name="date2" />

            </div>
            
          </div>
          <button className="mr-2 btn btn-primary" type="submit" onClick={handleClick}> تأكيد</button>
          <div>
              {error && <small className="text-danger"> {error} </small>}
            </div>


        </form>
      </div>
    </div>
  );
}

CodePudding user response：

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

<input type="date" className="form-control" value={date.date1} readOnly />

Second Input

<input type="date" className="form-control" value={date.date2} readOnly />

Third Input

<input type="date" className="form-control" value={date.date3} readOnly />

Fourth Input

<input type="date" className="form-control" value={date.date4} readOnly />

CodePudding user response：

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

<input type="date" className="form-control" {date ? `value=${addDays(date, 15)}` : `value=""` readOnly/>

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) {