如何将antD rangePicker的开始或结束日期设置为空

问题描述

在我的应用程序中，我使用的是RangePicker中的antd。我有范围限制，因此，如果所选范围超过一周，我想将endDate设置为空。我试图将其设置为空字符串和null，没有一个解决。日期返回到以前的值。有谁知道如何将日期值设置为空？

这是我的onChange函数，用于捕获和实现日期更改。

  const handleValuesChange = (newValues) => {
    const selectedRange = formatDate(newValues);
    if (Math.abs(selectedRange[0].diff(selectedRange[1],'days')) > daterangeLimitInDays) {
      setRangeValues([newValues[0],'']);
    }
    else {
      setRangeValues(selectedRange);
      handleChange(selectedRange);
    }
  };

解决方法

使用Antd Rangepicker将第二个值设置为null可以正常工作。

import React,{ useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker } from "antd";

const { RangePicker } = DatePicker;

const App = () => {
  const [dates,setDates] = useState([]);

  return (
    <RangePicker
      onCalendarChange={(value) => {
        console.log(value);
        setDates([value[0],null]);
      }}
      value={dates}
    />
  );
};

ReactDOM.render(<App />,document.getElementById("container"));

工作CodeSandBox。

如果需要进一步研究，请添加一个最小的，可复制的示例，例如CodeSandBox或Stackblitz。