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

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

 看Antd组件RangePicker：

 只存在底下的选择

采用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;
        }
      }
    }
  }
}

达到需求：