React Js Time Selector

Question

I have a component like this

I want to select the year from the first one, quarter second, and month in 3, but when I select a year and try to select a quarter the year disappears.

> 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>

here I have my date object

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

It's okay like this or should use a different state for every component.

I want to select a specific date from every component

Answer 1

When you want to change the state with setValues, you're clearing your component's previous state in the code. You should keep previous one and change current state. It can be done with Object Spread. So change setValues in components as below:

 <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>