Ant Design 日历不支持移动响应

Question

我的 React 网站上有一个 Ant Design Calendar 组件。

<Calendar
     value={this.state.value}
     fullscreen={false}
     onPanelChange={this._onPanelChange}
     onSelect={this._onSelect}
     disabledDate={(current) => {
            return current && moment().isAfter(current, "day");
     }}
/>

此日历在桌面上完美呈现，但在移动设备上则无法完全呈现。我尝试检查和更改属性，但没有任何结果。

在移动设备上，日历被切断（我得到一个水平滚动条），看起来像这样 -

知道如何克服这个问题吗？预先感谢。

Answer 1

如果将组件包装在 div 中并设置其宽度应该可以工作。

            <div className="calendarWrapper">
               <Calendar
                  className="dateCalendar"
                  selectionMode="single"
                  defaultValue={defaultDateValue}
                  onChange={onChangeDate}
               />
            </div>

.calendarWrapper {
   border: 1px solid var(--border-color);
   width: 100%;
   max-height: 390px !important;
}

Answer 2

您可以使用此动态 scss 代码来显示带有下一个-上一个按钮的单个日历日期范围。

.calendarWrapper {
  @media (max-width: 768px) {
    &>div>div>div>div:last-child {
      width: 0;
      position: absolute;
      visibility: hidden;

      &>div>div:first-child {
        &>button:nth-last-child(2),
        &>button:nth-last-child(1) {
          visibility: visible;
        }
      }

      &>div>div:last-child {
        display: none;
      }
    }
  }
}