1

I am using antd range picker for date range selection. By default antd gives two calendars for range selection. It gives us two inputs with which the calendars are opened. Now I need a single calendar that has this range selection functionality. With the answer mentioned here Need to show only one month in range picker selection area antd , I was able to get the styling. But on click of calendar icon or arrow , the calendars dont open. Also I see still is focussing of input at two places inside this container. Can someone help here

https://codesandbox.io/s/black-breeze-6gmz85?file=/src/styles.css

Code

import React from "react";
import "./styles.css";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
import moment from "moment";

const { RangePicker } = DatePicker;

export default function App() {
  return (
    <div className="App">
      <br />
      <RangePicker />
    </div>
  );
}

1 Answers1

0

"But on click of calendar icon or arrow, the calendars dont open" - because you are using old version of antd ie. 4.1.2, update that to the latest version then the calender will open on click of those icons

Jeeva Ramanathan
  • 1
  • 1