React Js Time Selector

Question

I have a component like this

Select time Component

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

Please share some code! Without code what can we do?! – Majid M. Jun 08 '21 at 08:13 — Majid M., Jun 08 '21 at 08:13

Majid M. · Accepted Answer · 2021-06-08T12:30:12.860

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>

React Js Time Selector

1 Answers1