Antd使用日期RangePicker框，实现左侧有时间区间选择 本月、上月、过去7天、过去30天等

产品要求：在原有日期框的左侧，添加本月、上月、过去7天、过去30天等选项。

 看Antd组件RangePicker：

 只存在底下的选择

<RangePicker
  ranges={{
    '今天': [moment(), moment()],
    '本月': [moment().startOf('month'), moment().endOf('month')],
    '过去7天': [moment().subtract(7, 'day').endOf('day'), moment().endOf('month')],
  }}
  onChange={onChange}
  dropdownClassName='custom' //样式 引入
/>

采用CSS去改变样式 达到左侧展示的需求

:global {
  .ant-calendar-panel {
    display: flex;
  }
}

效果：

在详细的去控制一下元素样式属性：

记得给到RangePicker的dropdownClassName属性

:global {
  .ant-calendar-panel {
    display: flex;
    flex-direction: row-reverse;

    .ant-calendar-footer {
      padding: 0px;
      border-right: 1px solid #E8E8E8;

      .ant-calendar-footer-btn {
        .ant-tag-blue {
          color: #000;
          background: #fff;
          background-color: "#fff";
          display: block;
          border: 0px;
          height: 35px;
          width: 100%;
          cursor: pointer;
        }
      }
    }
  }
}

达到需求：

产品为什么会这样提？

因为产品从别人系统看到这种交互，查了一下别的组件库  ElementUI是一样的 而Antd3x中这种预设范围都是在下方的

所以会出现需要二次封装时间框修改一部分样式