React daterangepicker - 移动友好

Posted 2023-03-16

【中文标题】React daterangepicker - 移动友好

【英文标题】：React daterangepicker - mobile friendly

【发布时间】：2020-05-22 07:14:20

【问题描述】：

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

【参考方案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 被请求...所以我必须使用它。谢谢推荐