只需要在范围选择器选择区域antd中显示一个月

Question

我的react应用程序使用antd日历RangePicker。我希望在选择时只显示一个月的日历下拉列表，而不是默认显示两个月。

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

Answer 1

Forantd@4使用这个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; 
}

Answer 2

您可以始终将css用于第二列

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

Answer 3

我想到的第一件事是使用showTime功能，但重新格式化以排除小时和分钟选择(默认(，即：

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