// 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

        </>

        );

}