Reputation: 723
Unable to clear date range picker from ant design after user selects date.
This is my code:
import React, { useState } from "react";
import { DatePicker } from "antd";
import moment from "moment";
const { RangePicker } = DatePicker;
import "antd/dist/antd.css";
const DataTable = props => {
const [dateRange, changeDateRange] = useState(null);
const onDateRangeChange = dateRange => {
if (dateRange) {
changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
}
};
const returnMomentDateRange = (start, finish) => {
return [moment(start, "YYYY-MM-DD"), moment(finish, "YYYY-MM-DD")];
};
return (
<RangePicker
allowClear={true}
size="small"
picker="date"
value={dateRange !== "" ? dateRange : ""}
onChange={onDateRangeChange}
/>
);
};
export default DataTable;
It seems that once I add a value prop, I can no longer clear using the 'x'.
This is a codesandbox I setup.
https://codesandbox.io/s/wispy-rgb-xidbz?file=/src/App.js:0-754
Upvotes: 1
Views: 6195
Reputation: 57
In your method onDateRangeChange use following code,
if (dateRange) {
changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
} else {
changeDateRange([]);
}
Upvotes: 1