如何在日期输入中默认设置开始日期和结束日期

Question

我需要默认设置开始日期和结束日期，平均开始日期形式为 1-04-2021，结束日期是当前日期，需要默认设置正确知道会发生什么用户可以自己选择日期，我需要设置它默认之后，用户可以根据自己的喜好进行更改。用户可以通过选择日期日历来更改它

const setDate = (e) => {
  const name = e.target.name;
  const value = e.target.value;
  setdate((prev_state) => ({
    ...prev_state,
    [name]: value,
  }));
};

const [FDate, setdate] = useState({ start: "", end: "" });

body = {
  Start_Date: FDate.start,
  End_Date: FDate.end,
};

    <Col lg={2}>
      <label for="start">
        <header>Start Date</header>
      </label>
      <input
        value={FDate.start}
        id="start"
        name="start"
        type="date"
        //  disabled={!dateSel}
        className="inputFields1"
        onChange={(e) => setDate(e)}
        required
      />
    </Col>

    <Col lg={2}>
      <label for="end">
        <header>End Date</header>
      </label>
      <input
        id="end"
        name="end"
        type="date"
        min={FDate.start}
        //  disabled={!dateSel}
        className="inputFields1"
        value={FDate.end}
        onChange={(e) => setDate(e)}
        required
      />
    </Col>

Answer 1

只需在 initialState 中分配默认的开始和结束日期值，而不是空字符串。

const [defaultDates, setDates] = useState({
    startDate: "2021-01-04",
    endDate: new Date().toISOString().substr(0, 10)
});

getDefaultDateValues

const getDefaultDates = () => {
  const date = new Date();
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let firstDateOfMonth = new Date(year, month, 1).getDate();

  firstDateOfMonth =
    firstDateOfMonth < 10 ? "0" + firstDateOfMonth : firstDateOfMonth;
  month = month < 10 ? "0" + month : month;

  const startDate = `${year}-${month}-${firstDateOfMonth}`;
  const endDate = date.toISOString().substr(0, 10);

  return {
    startDate,
    endDate
  };
};

CodeSandBox - https://codesandbox.io/s/twilight-brook-9hgs4?file=/src/App.js

const App = () => {
  const getDefaultDateValues = getDefaultDates();

  const [defaultDates, setDates] = useState(getDefaultDateValues);

  const setDateValues = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setDates((prev_state) => ({
      ...prev_state,
      [name]: value
    }));
  };

  return (
    <div>
      <p>
        <label for="start">
          <header>Start Date:- First day/date of the current month</header>
        </label>
        <input
          value={defaultDates.startDate}
          id="startDate"
          name="startDate"
          type="date"
          //  disabled={!dateSel}
          className="inputFields1"
          onChange={(e) => setDateValues(e)}
          required
        />
      </p>
      <p>
        <label for="end">
          <header>End Date:- current day/date of the current month</header>
        </label>
        <input
          id="endDate"
          name="endDate"
          type="date"
          min={defaultDates.startDate}
          //  disabled={!dateSel}
          className="inputFields1"
          value={defaultDates.endDate}
          onChange={(e) => setDateValues(e)}
          required
        />
      </p>
    </div>
  );
};

export default App;