antd中DatePicker怎么改变季度样式

在 antd 中，可以通过 `disabledDate` 函数自定义日期的可选范围和样式。对于季度选择器，可以通过判断当前日期所在季度是否可选来控制样式。

以下是一个示例代码，演示如何将季度选择器的不可选项加上灰色背景色：

import { DatePicker } from 'antd';
import moment from 'moment';

function disabledQuarter(date) {
  const quarter = Math.floor((date.month() + 3) / 3); // 计算当前月份所在季度
  return quarter !== 1; // 只有第一季度可选
}

function quarterCellRender(current) {
  const quarter = Math.floor((current.month() + 3) / 3);
  const cellStyle = {
    padding: '4px',
    backgroundColor: disabledQuarter(current) ? '#f5f5f5' : 'unset', // 根据日期是否可选设置背景色
  };
  return <div className="quarter-cell" style={cellStyle}>Q{quarter}</div>;
}

function QuarterPicker(props) {
  return (
    <DatePicker
      picker="quarter"
      disabledDate={disabledQuarter} // 自定义不可选日期
      dateRender={quarterCellRender} // 自定义日期单元格渲染
      {...props}
    />
  );
}

在 `disabledQuarter` 函数中，使用 `moment` 库计算当前月份所在季度，然后判断是否为第一季度，只有第一季度才可选。在 `quarterCellRender` 函数中，根据日期是否可选设置单元格的背景色。

最后，将 `QuarterPicker` 组件作为日期选择器使用即可：

<QuarterPicker />