CODEWITHSUNDEEP
reactjstypescriptantddaterangepicker
Dilshan Harshana
Dilshan Harshana

Reputation: 137

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

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>

Upvotes: 6

Views: 7121

Answers (6)

Sai
Sai

Reputation: 1

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>

)

Upvotes: 0

Дмитрий Полыко
Дмитрий Полыко

Reputation: 1

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

Upvotes: 0

Markus Ridziauskas
Markus Ridziauskas

Reputation: 439

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

Upvotes: 2

heberuriegas
heberuriegas

Reputation: 366

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; 
}

Upvotes: 4

Munei Nengwenani
Munei Nengwenani

Reputation: 123

You can always use css for the 2nd column

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

Upvotes: 1

gqstav
gqstav

Reputation: 2072

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>

Upvotes: 1

Related Questions