REACT- 如何将结束日期默认设置为与开始日期相同，但如果结束日期早于开始日期，则进行控制？

Question

如果用户选择了一个开始日期，我希望默认情况下结束日期也是同样的。然后，如果用户想要更改结束日期，他可以这样做。 目前，我可以选择开始日期和结束日期。

并且对我的日期设置条件，即不能设置早于开始日期的结束日期。

以下是我的代码：

export default function SelectionChoice({ next, selChoice2, setSelChoice2 }) {
  const [summary, setSummary] = useState("");
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [selChoice1, setSelChoice1] = useState();
  const [data, setData] = useState([])


  useEffect(() => {
    myApi.functionA()
      .then((res) => {
        console.log(res);
        setData(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  ...
  const choice1 = data?.map((item) => {
    return {
      label: item.name,
      value: item.id
    };
  });

  const choice2 = data?.flatMap((item) => {
    return item.choice2.map((c) => ({
      label: c.name,
      value: c.id
    }));
  });

  const textChange = (e) => {
    if (e?.target?.id === undefined) return setSelChoice1(e);
    if (e?.target?.id === undefined) return setSelChoice2(e);
    switch (e.target.id) {    
    ...
      case "start":
        setStart(e.target.value);
        break;
      case "end":
        setEnd(e.target.value);
        break;
      default:
    }
  };
  return (
    <>
      <form>
        <div >
          Choose choice1 and choice2
        </div>
        <div>
          <label>
            Choice1:
            <CustomDropdown
              options={choice1}
              value={selChoice1}
              setValue={setSelChoice1}
              isMulti={true}
            />
          </label>
          <label>
            Choice2:
            <CustomDropdown
              options={choice2}
              value={selChoice2}
              setValue={setSelChoice2}
              isMulti={true}
            />
          </label>
        </div>
        <div>
          <label>
            Start:
            <div>
              <input
                type="date"
                name="start"
                value={start}
                onChange={textChange}
                id="start"
              />
            </div>
          </label>
          <label>
            End:
            <div>
              <input
                type="date"
                name="end"
                value={end}
                onChange={textChange}
                id="end"
              />
            </div>
          </label>
          <p className="formfield">
            <label
              for="summary"
            >
              Description :
              <textarea
                value={summary}
                onChange={textChange}
                name="summary"
                id="summary"
                cols="10"
                rows="10"
              />
            </label>
          </p>
        </div>
      </form>
        <button
          onClick={() =>
            next({           
              ...,
              start,
              end
            })
          }
        >
          Next
        </button>
    </>
  );
}

- Zokulko

Answer 1

我希望你可以更新代码，像下面这样检查可能的情况。 并且我还使用了async/await更新了异步函数。

export default function SelectionChoice({ next, selChoice2, setSelChoice2 }) {
  ...
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  ...

  useEffect(() => {
    /*
    myApi.functionA()
      .then((res) => {
        console.log(res);
        setData(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
      */

    const getData = async () => {
      try {
        const res = await myApi.functionA();
        setData(res.data.data);
      } catch(err) {
        console.log(err)
      }
    }

    getData();

  }, []);

  const textChange = (e) => {
    switch (e.target.id) {    
      case "start":
        setStart(e.target.value);
        const startDate = new Date(e.target.value).getTime();
        const endDate = new Date(end).getTime();

        // Check if end date is not set 
        // Or End Date is before Start Date
        if (!!end || startDate > endDate) {
          setEnd(e.target.value)
        }
    
        break;
      case "end":
        const endDate = new Date(e.target.value).getTime();
        const startDate = new Date(start).getTime();

        // Check End Date is before the Start Date
        if (endDate < startDate) {
           setEnd(start);
        } else {
           setEnd(e.target.value);
        }
      
        break;
      default:
        break;
    }
  };

  return (
    ...
  )

希望这能对你有所帮助，即使只是一点点。
谢谢。

- Satel

Answer 2

在更新开始日期时，您可以检查结束日期是否有任何值并进行设置（如果没有任何值）。

switch (e.target.id) {
  case "start":
    setStart(e.target.value);
    if (!end) {
      setEnd(e.target.value);
    }
    break;
  case "end":
    if (e.target.value >= start) {
      setEnd(e.target.value);
    } else {
      //flash error message
    }
    break;
  default:
}

- Anish Antony

---

在 else 中，我写了 <FlashMessage duration={3000}> <span className=text-red-400>ERROR </span></FlashMessage>，但是如果我选择的结束日期早于开始日期，就什么也不会打印出来，你知道为什么吗？ - Zokulko

由于它位于onChange函数内，React将不会从那里进行渲染。如果您想从函数调用闪存消息，则可以使用https://www.npmjs.com/package/react-universal-flash。 - Anish Antony

Answer 3

请注意结束日期不要早于开始日期

- regex