在 React 中顯示所選月份和年份的完整日期

Question

我只想選擇月份和年份，但我想輸出所選月份和年份的第一天以及所選月份和年份的最后一天。 輸出日期應該是完整的。 它們是fromDate和toDate 。

例如：如果選擇 2021 年 1 月，則

從日期是01-01-2021

截止日期是31-01-2021

請在這里檢查我的代碼和框點擊這里

您可以修改months和years數組，因為它們是靜態的。 以最好的方式進行修改。

  <div style={{ display: "flex", gap: "1em", flexDirection: "row" }}>
    <h3> Month </h3>
    <Select onChange={(e) => select(e)}>
      {months.map((key, index) => (
        <option value={key} key={index}>
          {key}
        </option>
      ))}
    </Select>
    <h3> Year </h3>
    <Select onChange={(e) => select(e)}>
      {years.map((key, index) => (
        <option value={key} key={index}>
          {key}
        </option>
      ))}
    </Select>
  </div>

Answer 1

您只有一個選定日期，由您的兩個下拉菜單組合而成。 與其存儲多條信息（月份和年份），不如考慮存儲從這些字段創建的單個日期。

  const [selectedDate, setSelectedDate] = React.useState(new Date());

  const handleMonthSelect = (e) => {
    const { value } = e.target;
    const month = parseInt(value, 10);
    setSelectedDate(new Date(getYear(selectedDate), month));
  };

  const handleYearSelect = (e) => {
    const { value } = e.target;
    const year = parseInt(value, 10);
    setSelectedDate(new Date(year, getMonth(selectedDate)));
  };

然后您可以顯示該信息以及您在該州的日期的一些計算值。 在這里，我使用 date-fns，但您可以在某處進行自己的查找或計算以找到該月的最后一天。

<div>First: {startOfMonth(selectedDate).toDateString()}</div>
<div>Last: {lastDayOfMonth(selectedDate).toDateString()}</div>

為了處理年的動態列表，我創建了一個提供年列表的自定義鈎子：

export const useDynamicYears = ({ startingYear, numberOfYears }) => {
  const [years, setYears] = React.useState(() => {
    const dynamicYears = [];
    for (let year = startingYear; year < startingYear + numberOfYears; year++) {
      dynamicYears.push(year);
    }
    return dynamicYears;
  });
  return years;
};

// and to use it...
const dynamicYears = useDynamicYears({
  startingYear: 2015,
  numberOfYears: 20
});

這是一個沙箱： https : //codesandbox.io/s/styled-components-select-dropdown-month-year-forked-wcr6u