I have an issue with Ant Design ponent: Date Picker (Range Picker). [/ponents/date-picker/] I am using this with React and hooks. I need to be able to change the date inside of the Range Picker by clicking on the button. The data in the state is being updated properly, but it doesn't update the date in the date picker. I am thinking the issue is with the moment.js library which is being used for Date Picker by Ant Design. In the Date Picker, the date values are being enclosed inside moment functions. Maybe there is a way to update the ponent manually after state changes? Am I getting something wrong?

const DateSelect = () => {
  const RangePicker = DatePicker.RangePicker;
  const dateFormat = 'YYYY/MM/DD';
  const [currentDate, setCurrentDate] = useState(moment().format(dateFormat));
  const addSevenDays = () => {
  const weekFromNow = moment()
      .add(1, 'w')
      .format(dateFormat);
    setCurrentDate(weekFromNow);
    console.log(currentDate);
  };
  return (
    <div>
      <Button onClick={addSevenDays}>Add 7 days</Button>
      <RangePicker
        defaultValue={[
          moment(currentDate, dateFormat),
          moment(currentDate, dateFormat),
        ]}
        format={dateFormat}
      />
      <span> {currentDate} </span>
    </div>
  );
};
render(<DateSelect />, document.getElementById('app'));

Here is a codepen for this issue:

I have an issue with Ant Design ponent: Date Picker (Range Picker). [https://ant.design/ponents/date-picker/] I am using this with React and hooks. I need to be able to change the date inside of the Range Picker by clicking on the button. The data in the state is being updated properly, but it doesn't update the date in the date picker. I am thinking the issue is with the moment.js library which is being used for Date Picker by Ant Design. In the Date Picker, the date values are being enclosed inside moment functions. Maybe there is a way to update the ponent manually after state changes? Am I getting something wrong?

const DateSelect = () => {
  const RangePicker = DatePicker.RangePicker;
  const dateFormat = 'YYYY/MM/DD';
  const [currentDate, setCurrentDate] = useState(moment().format(dateFormat));
  const addSevenDays = () => {
  const weekFromNow = moment()
      .add(1, 'w')
      .format(dateFormat);
    setCurrentDate(weekFromNow);
    console.log(currentDate);
  };
  return (
    <div>
      <Button onClick={addSevenDays}>Add 7 days</Button>
      <RangePicker
        defaultValue={[
          moment(currentDate, dateFormat),
          moment(currentDate, dateFormat),
        ]}
        format={dateFormat}
      />
      <span> {currentDate} </span>
    </div>
  );
};
render(<DateSelect />, document.getElementById('app'));

Here is a codepen for this issue: https://codepen.io/anon/pen/rPEmPg?editors=0010

• javascript
• reactjs
• antd
• react-hooks

2 Answers 2

There are several mistakes you made:

1. you don't pass an onChange callback to the DatePicker ponent - which means the inputs of your DatePicker will not be propagated up to the DateSelect ponent
2. you are using defaultValue instead of value, which doesn't let you change the value from the parent ponent, when the state is updated
3. you are saving only one date in the state, though, I suppose, you want to save a range

I've forked your codepen and fixed it: https://codepen.io/anon/pen/VgJzER

If you want to update the dates dynamically or by a button click use dayjs npm to achive this :

  import moment from "moment";
  import dayjs from "dayjs";

  const today = moment();
  const lastWeek = moment().subtract(7, "days");
 
  const rangePickerDt = [dayjs(today), dayjs(lastWeek)];
   
  setRangeDates(rangePickerDt);

`