在 antd 官网找不到季度选择器相关修改这个按钮值的属性，dateRender 只适用于自定义日期单元格的内容和样式，对季度单元格不生效；panelRender 则相当于需要重新写一个季度选择器，不是最佳方案。
在网络上寻找到的也都是重新写一个或者模仿写一个季度选择器，但都有或多或少的问题，而且功能也没有 antd 的那么完善，自己写一个好像能力又有限，于是有了以下方法。

使用 CSS 伪类元素解决这个问题，偶然发现 antd 里面写了伪类元素：

于是我想或许可以通过伪类元素的 content 属性来解决这个问题，方案有了，开始实践。

index.tsx 文件：

import React from 'react';
import { DatePicker } from 'antd';
import styles from './index.less';
const QuarterPicker = () => {
  const onChange = (date: any, dateString: any) => {
    console.log(date, dateString);
  return (
      <DatePicker
        onChange={onChange}
        picker="quarter"
        className={styles.quarterPickerBox}
        dropdownClassName={styles.quarterPicker}
    </div>
export default QuarterPicker;
index.less 文件：
 
.quarterPickerBox {
  width: 230px;
.quarterPicker {
  :global {
    .ant-picker-year-panel,
    .ant-picker-quarter-panel {
      width: 230px;
    // 修改选中的年份、季度背景颜色
    .ant-picker-cell-selected {
      .ant-picker-cell-inner {
        background: #5788ff;
    // 使用CSS改变季度选择器的内容
    .ant-picker-quarter-panel {
      .ant-picker-content {
        // 使季度选择器可以换行成两排
        tr {
          display: flex;
          flex-wrap: wrap;
        // 控制按钮外层宽度，使器溢出换行
        td {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 50px;
          padding: 20px;
      // 使before伪元素和按钮背景颜色一致
      .ant-picker-cell-selected {
        &::before {
          color: #fff;
          background: #5788ff;
      // 控制伪元素所占宽度
      .ant-picker-cell {
        &::before {
          right: auto;
          left: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60%;
      // 隐藏季度选择器的按钮，用伪元素代替
      .ant-picker-cell-inner {
        display: none;
      // 根据title更换相应伪元素的content，使其代替原本的按钮
      .ant-picker-cell[title$='-Q1'] {
        &::before {
          content: '第一季度';
      .ant-picker-cell[title$='-Q2'] {
        &::before {
          content: '第二季度';
      .ant-picker-cell[title$='-Q3'] {
        &::before {
          content: '第三季度';
      .ant-picker-cell[title$='-Q4'] {
        &::before {
          content: '第四季度';
                                    最近写项目碰到一个需求，需要实现时间、月份、季度多选,要求能切换年份,查了一下ant-design的组件,发现不支持多选,没办法只能手写了,看文档的时候发现了一个插槽#dropdownRender,可以插入任意元素,话不多说上代码.简单的一个小组件,可以根据自己的需求更改,有什么不懂的可以私信我!// 使用 ref 创建响应式变量。// 左切换按钮点击事件处理程序。// 右切换按钮点击事件处理程序。
                                    不过看到这里，应该可以解释出当test环境变量名改变后bug就消失的现象，其实也不一定要用.sandbox来替代.test，非.test的值均可。至于为什么会有这段代码，可能是antd团队在测试版本中想避免某些问题，咱也理不清。然后在package.json中把测试版本的打包命令后缀换成sandbox。把环境变量的文件名.env.test改为 .env.sandbox；以上为个人的误打误撞，欢迎大伙指正与补充。
                                    本篇记录了基于element ui实现的季度组件，基本实现组件的切换年份和季度的功能，对组件传值格式的要求是yyyymmdd-yyyymmdd，如果有更好的建议，欢迎斧正~