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

原创已于 2025-03-17 10:28:19 修改 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-02-20 11:05:10 首次发布

产品要求：在原有日期框的左侧，添加本月、上月、过去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;
        }
      }
    }
  }
}