React daterangepicker - 移动友好答案

【问题标题】：React daterangepicker - mobile friendlyReact daterangepicker - 移动友好
【发布时间】：2020-05-22 07:14:20
【问题描述】：

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

【问题讨论】：

标签： reactjs datepicker antd daterangepicker

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

当您在移动视图上时，您应该将 flex 方向更改为列

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

【讨论】：

【解决方案3】：

2021 年解决方案

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

使用 styled-components 和 datePicker 的 panelRender 属性，您可以将整个面板包装在一个包装器中，允许您在移动设备中编辑 css 类并在桌面上重置它们。

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

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

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

CSS

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;
        }
      }
    }
  }
`;

【讨论】：

【解决方案4】：

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

见https://codesandbox.io/s/oip3r

【讨论】：

RangePicker 被请求...所以我必须使用它。谢谢推荐