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>

Adding a codesandbox link/preview will help! – ParthS007 Apr 13 '20 at 09:55 — ParthS007, Apr 13 '20 at 09:55
codesandbox: https://wvt2t.csb.app/ – Dilshan Harshana Apr 13 '20 at 10:05 — Dilshan Harshana, Apr 13 '20 at 10:05

score 3 · Answer 1 · answered Oct 07 '20 at 23:35

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

score 1 · Answer 2 · answered Jul 08 '20 at 16:33

1

You can always use css for the 2nd column

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

answered Jul 08 '20 at 16:33

Munei Nengwenani

113
2
10

score 0 · Answer 3 · answered Apr 13 '20 at 10:19

0

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>

answered Apr 13 '20 at 10:19

gqstav

1,984
1
12
18

I tried this but it shows an empty column with header having the date, Is there anyway to remove this empty time column. ? – Dilshan Harshana Apr 13 '20 at 10:30
Does this sandbox help you: https://codesandbox.io/s/competent-resonance-7904l?file=/src/App.js? – gqstav Apr 13 '20 at 13:09
It is not the exact outcome I need. Better I can remove the 2nd column entirely. Thanks for the suggestion though. – Dilshan Harshana Apr 13 '20 at 13:13

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

3 Answers3

Linked