React Js 时间选择器

Question

我有这样的组件

我想 select 从第一个开始的年份，第二个季度和 3 中的月份，但是当我 select 一年并尝试 select 一年中的一个季度消失。


> code for year Selector

<DatePicker
            selected={values.year}
            onChange={(date) => setValues({ year: date })}
            showYearPicker
            dateFormat="yyyy"
            yearItemNumber={9}
            className="inputDate"
          />
 
       

> code for quarter Selector

          <DatePicker
            name="quarter"
            onChange={(date) => setValues({ quarter: date })}
            selected={values.quarter}
            dateFormat="QQQ"
            showQuarterYearPicker
            className="inputDate"
            onSelect={(date) => {
              moment().endOf("quarter");
            }}
          />
     

> code for Month Selector

          <ButtonGroup className="button-container">
            <Button
              variant="outline-primary"
              size="md"
              className="month-button"
              onClick={() =>
                setValues({
                  month: moment()
                    .month(showMonth(values.quarter) - 3)
                    .format("MMMM YYYY"),
                })
              }
            >
              {moment()
                .month(showMonth(values.quarter) - 3)
                .format("MMMM")}
            </Button>

这里有我的日期对象

const [values, setValues] = useState({
year: new Date(),
quarter: new Date(),
month: "",
});

这样也可以，或者应该为每个组件使用不同的状态。

我想select每个组件的特定日期

Answer 1

当您想使用 setValues 更改状态时，您正在清除代码中组件的先前状态。您应该保留上一个并更改当前状态。可以用 Object Spread 来完成。所以改变 setValues 组件如下：

 <DatePicker
        selected={values.year}
        onChange={(date) => setValues({ ...values , year: date })}
        showYearPicker
        dateFormat="yyyy"
        yearItemNumber={9}
        className="inputDate"
      />
<DatePicker
        name="quarter"
        onChange={(date) => setValues({ ...values, quarter: date })}
        selected={values.quarter}
        dateFormat="QQQ"
        showQuarterYearPicker
        className="inputDate"
        onSelect={(date) => {
          moment().endOf("quarter");
        }}
      />
<ButtonGroup className="button-container">
        <Button
          variant="outline-primary"
          size="md"
          className="month-button"
          onClick={() =>
            setValues({
              ...values,
              month: moment()
                .month(showMonth(values.quarter) - 3)
                .format("MMMM YYYY"),
            })
          }
        >
          {moment()
            .month(showMonth(values.quarter) - 3)
            .format("MMMM")}
        </Button>

React Js 时间选择器

React Js Time Selector

reactjs

datepicker

react-datepicker