在 React 中显示所选月份和年份的完整日期

Question

我只想选择月份和年份，但我想输出所选月份和年份的第一天以及所选月份和年份的最后一天。输出日期应该是完整的。 他们是fromDate 和toDate。

例如：如果选择 2021 年 1 月，那么

fromDate 是01-01-2021

toDate 是31-01-2021

请在此处检查我的代码框 CLICK HERE

您可以修改 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