Antd DatePicker配置泰语locale时如何正确显示佛历年份

• 为Ant Design的DatePicker组件应用泰语语言包后，年份显示不符合泰区使用规范：泰语场景下需要显示佛历年份，计算规则为公历年数值+543。

显示效果异常参考截图：

• 查阅官方DatePicker组件API文档，未找到可直接修改日期面板年份显示规则的配置项。

// App.js
import React from 'react'
import {DatePicker} from 'antd'
import 'moment/locale/th'
import locale from 'antd/lib/locale-provider/th_TH'


function App() {
  return <DatePicker locale={locale}/>
}
  
export default App

Ant Design v3/v4版本的DatePicker底层基于moment实现日期计算与渲染，默认的泰语语言包仅做了文案翻译，没有内置佛历年份偏移逻辑，可以通过覆写moment的格式化方法实现全场景佛历年份显示，不会影响组件原有日期选择逻辑：

1. 覆写moment原型上的format方法，仅在渲染年份相关文本时做+543的偏移，不修改moment内部存储的实际公历日期值，避免日期计算、值提交出错。
2. 原有语言包配置不需要调整，面板的月份、星期、操作按钮文案会保持泰语显示。

调整后的完整代码如下：

// App.js
import React from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
import 'moment/locale/th'
import locale from 'antd/lib/locale-provider/th_TH'

// 保存moment原始格式化方法
const originMomentFormat = moment.prototype.format
moment.prototype.format = function (formatString) {
  const originResult = originMomentFormat.call(this, formatString)
  // 匹配年份格式化占位符，仅处理年份渲染逻辑
  if (/(Y+)/.test(formatString)) {
    const christianYear = this.year()
    const buddhistYear = christianYear + 543
    // 替换渲染结果中的公历年为佛历年
    return originResult.replace(String(christianYear), String(buddhistYear))
  }
  return originResult
}

function App() {
  return <DatePicker locale={locale} />
}

export default App

补充说明：如果使用Ant Design v5版本，组件底层替换为dayjs，实现逻辑完全一致，只需要把覆写对象从moment换成dayjs的原型方法即可。该方案不会修改表单拿到的实际日期值，向后端提交数据时不需要额外做年份减543的转换。

内容的提问来源于stack exchange，提问作者Boon Lims.