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

【问题标题】：Need to show only one month in range picker selection area antd只需要在范围选择器选择区域显示一个月 antd
【发布时间】：2020-07-25 20:30:20
【问题描述】：

我正在为我的 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>

【问题讨论】：

添加代码框链接/预览会有所帮助！
代码沙盒：wvt2t.csb.app

标签： reactjs typescript antd daterangepicker

【解决方案1】：

对于 antd@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; 
}

【讨论】：

【解决方案2】：

第二列总是可以使用 css

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

【讨论】：

【解决方案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>

【讨论】：

我试过这个，但它显示一个空列，标题有日期，无论如何要删除这个空时间列。 ?
这个沙盒对你有帮助吗：codesandbox.io/s/competent-resonance-7904l?file=/src/App.js?
这不是我需要的确切结果。更好的是我可以完全删除第二列。不过感谢您的建议。