React daterangepicker - 移动友好

Question

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

Answer 1

您可以使用 2 DatePicker 和 disabledDate 属性.

而不是使用始终显示 2 个月的 RangePicker

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

Answer 2

可以更改来自库的样式。在 Chrome 开发工具中查看时使用您看到的确切名称（库中的类以 "ant" 开头）。为了在你的 .less 文件中添加媒体查询，覆盖最大宽度为 480px 的屏幕。改下面2个就够了类:

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

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

Answer 3

您应该在移动视图中将伸缩方向更改为列

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

Answer 4

2021 年解决方案

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

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

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

绑定

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

React daterangepicker - 移动友好

React daterangepicker - mobile friendly

datepicker

daterangepicker

reactjs

antd