reactjs - Behöver visa endast en månad i urvalsområdet för range picker antd

Jag använder antd kalender RangePicker för min React-app. Jag vill visa endast en månad i kalenderns dropdown vid val, istället för de två månader som är standard.

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

Svar #1

För antd@4 kan det vara möjligt att använda denna 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; 
}

Svar #2

Till alla som råkar på detta, finns det en snabb lösning:

  • ange klassnamn för popup:
   <RangePicker
     ...
     popupClassName="dateRangePicker"
     ...
   />
  • manipulera css:
    .dateRangePicker .ant-picker-panel:nth-child(2){
        display: none;
      }
    
      .dateRangePicker .ant-picker-panel:nth-child(1) button{
        visibility: visible !important;
      }

Detta kommer att dölja den andra panelen och visa de nödvändiga ikonerna för månadsbyte

Relaterade artiklar