Need to show only one month in range picker selection antd

See original GitHub issue

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>

codesandbox: wvt2t.csb.app

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

16reactions
woohooucommented, Oct 7, 2020

If anyone has the same problem, I solve it with this:

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

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

.ant-picker-footer-extra > div {
  flex-wrap: wrap !important; 
}
0reactions
KiraBurovacommented, Dec 15, 2022

@samridhi-J

using the above solution, on clicking month and year button in the header shows nothing .How to fix that issue? @imsid1996 , @woohoou

I think you can fix it by doing

.ant-picker-panels > *:nth-child(2) {
      display: none;
    }

instead of

.ant-picker-panels > *:last-child {
  display: none;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Need to show only one month in range picker selection area ...
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 ......
Read more >
Need to show only one month in range picker selection area ...
First thing that comes to my mind is using the showTime feature, but re-formatting to exclude hour and minute selection(default), i.e.:
Read more >
DatePicker - Ant Design
To select or input a date. When To Use. By clicking the input box, you can select a date from a popup calendar....
Read more >
DateRangePicker - React Suite
If <DateRangePicker> does not satisfy the business scenario in which you select the time range, you can use two DatePicker combinations.
Read more >
Date Range Picker for Bootstrap
The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found