Reactjs React daterangepicker-移动友好型

我在React项目中使用Ant Design，但我找不到用于以移动友好格式显示日历的属性。它将始终显示2个月，第二个月不适合移动屏幕。有解决办法吗？我尝试使用具有numberOfMonths属性的react dates组件，但没有时间选择器…

而不是使用始终显示2个月的RangePicker，您可以使用2 DatePicker和disabledDate属性

---

请参见

可以更改来自库的样式。在Chrome开发工具中查看库中以ant开头的类时，请使用您看到的确切名称。要在.less文件中执行此操作，请添加覆盖最大宽度为480px的屏幕的媒体查询。更改以下两个类就足够了：

@media (max-width: 480px) {
    .ant-calendar-range {
        width: 320px;
    }
    .ant-calendar-range-part {
        width: 100%;
    }
}

您的范围选择器将在列中显示月份，因此它们适合小屏幕：

---

在“移动视图”上时，应将“弯曲方向”更改为“柱”

 @media(max-width: 576px) { 
  .ant-picker-panels { 
    flex-direction: column;
  } 
}

解决方案2021

我想出了这个解决方案，就是隐藏第二个选择器，但总是保留下个月的功能

使用样式化组件和datePicker的panelRender属性，您可以将整个面板包装在一个包装器中，该包装器允许您在mobile中编辑css类并在桌面上重置它们

如果您不使用样式化组件，请随意全局编辑css或将div与全局类绑定

const RangeDatePicker = (props) => {
  const panelRender = (panelNode) => (
    <StyleWrapperDatePicker>
      {panelNode}
    </StyleWrapperDatePicker>
  );

  return <DatePicker.RangePicker  panelRender={panelRender} {...props} />;
};

已请求RangePicker。。。所以我必须使用它。不过，Thx是推荐的

export const StyleWrapperDatePicker = styled.div`
  .ant-picker-panel {
    &:last-child {
      width: 0;
      .ant-picker-header {
        position: absolute;
        right: 0;
        .ant-picker-header-prev-btn, .ant-picker-header-view {
          visibility: hidden;
        }
      }

      .ant-picker-body {
        display: none;
      }

      @media (min-width: 768px) {
        width: 280px!important;
        .ant-picker-header {
          position: relative;
          .ant-picker-header-prev-btn, .ant-picker-header-view {
            visibility: initial;
          }
        }

        .ant-picker-body {
          display: block;
        }
      }
    }
  }
`;