CODEWITHSUNDEEP
reactjsantd
schoenbl
schoenbl

Reputation: 723

Unable to clear range picker after date is selected in ant design

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

Answers (1)

Saiem Saeed
Saiem Saeed

Reputation: 57

In your method onDateRangeChange use following code,

if (dateRange) {
   changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
} else {
   changeDateRange([]);
}

Upvotes: 1

Related Questions