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

Posted 2023-02-22

【中文标题】只需要在范围选择器选择区域显示一个月 antd

【英文标题】：Need to show only one month in range picker selection area 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

【参考方案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?

这不是我需要的确切结果。更好的是我可以完全删除第二列。不过感谢您的建议。