admin 管理员组

文章数量: 1086019

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
Share Improve this question asked Feb 22, 2019 at 10:16 ineffableineffable 1791 gold badge5 silver badges15 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

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

`

本文标签： javascriptAnt Design Range Picker not updating date when state updatesStack Overflow

版权声明：本文标题：javascript - Ant Design Range Picker not updating date when state updates - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744088684a2531618.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。