Breaking News: Grepper is joining You.com. Read the official announcement!

two dates input

Super Sandpiper answered on August 28, 2022 Popularity 7/10 Helpfulness 2/10

answer two dates input

two dates input

Comment

    // Creates a Two-Step Date Input Option
    
function someComponent() {
    // State Objects
     const [startDate, setStartDate] = useState("");
     const [endDate, setEndDate] = useState("");
  	 const [dateWarning, setDateWarning] = useState("");
     
     return (
      <>
     // JSX
     <div className="col">
          <label>
            Date Range
          </label>
          <legend style={{
            display: startDate === null ? "block" : "none"
          }}>
          <input
            type="date"
            className="form-control"
            placeholder={"Select Start Date"} 
            value={startDate}
            onChange={(e) => {
              setStartDate(e.target.value)
              console.log(e.target.value);
              console.log(startDate);
              setDateWarning("");
            }}
          />
          <span style={{
              fontSize: "8px"
          }}>Start</span>
          </legend>
           <legend style={{
             display: startDate === null ? "none" : "block"
           }}>
           <input
            type="date"
            className="form-control"
            placeholder={"Select End Date"} 
            value={endDate}
            
            onChange={(e) => {
              if (e.target.value > startDate) {
                setDateWarning("");
                setEndDate(e.target.value);
              } else {
                setEndDate(null);
                setDateWarning("End Date must be greater than Start Date");
              }
            }}
          />
          <span style={{
              fontSize: "8px",
           }}>End</span><span style={{
              color: "red",
              fontSize: "9px",
              marginLeft: '5px'
           }}>
            {dateWarning}
           </span>
          </legend>
        </div
		</>
		);
}

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: www.wiredintech.co.za

Tags: input javascript

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Super Sandpiper

0 Answers Avg Quality 2/10

two dates input

Contents

More Related Answers

two dates input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.