使用ant design RangePicker范围选择的一个问题

670 阅读1分钟

如果RangePicker有默认值,比如默认24号,这时候如果直接点击1号在点击其他地方关闭日历就会出现选中1-24号的bug。

目前解决方法是弹出日历先清空,判断日期是否发生变化,如果没有变化,日期就设置回默认值

const RangePickers = ({setFieldsValue, defaultData}) => {
  let isOnchange = false
  const defaultData = [moment().startOf('day'), moment().endOf('day')]
  const [dates, setDates] = useState([]);
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 15;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 15;
    return tooEarly || tooLate;
  };

  return (
    <Form.Item
      label="日期"
      name="date"
    >
      <RangePicker
        disabledDate={disabledDate}
        onCalendarChange={value => {
          setDates(value);
        }}
        onOpenChange={open => {
          if(open) {
            setDates([]);
            setFieldsValue({
              date: []
            })
          } else if(!open && !isOnchange) {
            setFieldsValue({
              date: defaultData
            })
          }
        }}
        onChange={() => {
          isOnchange = true
        }}
      />
    </Form.Item>
  );
};