Need to show only one month in range picker selection area antd

Question

I'm using antd calendar RangePicker for my react app.i want to show only one month of calendar dropdown upon selection, instead of two months default.

<div className="DatePickerBar">
   <RangePicker format="YYYY-MM-DD"
     className="DateInput"
     value={[moment(dateRange.from), moment(dateRange.to)]}
     onChange={this.onRangeChange}
     allowClear={false}
    />
</div>

Bilbo

Adding a codesandbox link/preview will help! – Proselyte

codesandbox: wvt2t.csb.app – Bilbo

Answer 1

For antd@4 it can be possible using this CSS

.ant-picker-panels > *:first-child button.ant-picker-header-next-btn {
  visibility: visible !important;
}

.ant-picker-panels > *:first-child button.ant-picker-header-super-next-btn {
  visibility: visible !important;
}

.ant-picker-panels > *:last-child {
  display: none !important;
}

.ant-picker-panel-container, .ant-picker-footer {
  width: 280px !important;
}

.ant-picker-footer-extra > div {
  flex-wrap: wrap !important; 
}

Solstice

Answer 2

To anyone who stumbles on this, there is a quick workaround:

• set class name of popup:

   <RangePicker
     ...
     popupClassName="dateRangePicker"
     ...
   />

• manipulate the css:

    .dateRangePicker .ant-picker-panel:nth-child(2){
        display: none;
      }
    
      .dateRangePicker .ant-picker-panel:nth-child(1) button{
        visibility: visible !important;
      }

This will hide the second panel and display the necessary icons for month switching

Rosalvarosalyn

Answer 3

First thing that comes to my mind is using the showTime feature, but re-formatting to exclude hour and minute selection(default), i.e.:

<div className="DatePickerBar">
   <RangePicker format="YYYY-MM-DD"
     className="DateInput"
     value={[moment(dateRange.from), moment(dateRange.to)]}
     onChange={this.onRangeChange}
     allowClear={false}
     showTime
     format="YYYY/MM/DD"
    />
</div>

Newcomb

I tried this but it shows an empty column with header having the date, Is there anyway to remove this empty time column. ? – Bilbo

Does this sandbox help you: codesandbox.io/s/competent-resonance-7904l?file=/src/App.js? – Newcomb

It is not the exact outcome I need. Better I can remove the 2nd column entirely. Thanks for the suggestion though. – Bilbo

Answer 4

You can always use css for the 2nd column

.ant-picker-time-panel {
  display:none !important;
}

Thermotensile

Answer 5

I solved this by adding showTime={true} and display: none for time block in CSS.

This helped save the toggle buttons for the next month

Christianity

Answer 6

try this code gives one calendar with buttons :

const [dateRangeClick, setDateRangeClick] = useState("")

 useEffect(() => {
        const containers = document.querySelectorAll(".ant-picker-panels");
        containers.forEach((container) => {
            const secondPanel = container.querySelector(
                ".ant-picker-panel:nth-child(2)"
            );
            if (secondPanel) {
                secondPanel.style.display = "none";
            }
        });

        containers.forEach((container) => {
            const firstButton = container.querySelector(
                ".ant-picker-panel:nth-child(1) .ant-picker-date-panel .ant-picker-header .ant-picker-header-next-btn"
            );
            const secondButton = container.querySelector(
                ".ant-picker-panel:nth-child(1) .ant-picker-date-panel .ant-picker-header .ant-picker-header-super-next-btn"
            );
            if (firstButton && secondButton) {
                firstButton.style.visibility = "visible";
                secondButton.style.visibility = "visible";
            }
        });
        // const secondButton = document.querySelector(".header .secondbtn");
    }, [dateRangeClick]);

return(

    <div
    onClick={()=>{
       setDateRangeClick("clicked")
    }}
    >
    <<RangePicker ... />
    
    </div>

)

Iapetus