咨询Material UI v5 Datepicker对应指定日期的输入格式及有效格式查询

适配"Saturday, September 24th 2022"格式的解决步骤 #

Day.js原生不支持Do这种带序数后缀（st/nd/rd/th）的格式语法，需要借助扩展插件实现：

1. 安装Day.js高级格式插件

npm install dayjs-plugin-advanced-format
# 或使用yarn
yarn add dayjs-plugin-advanced-format

2. 在项目中注册插件

import dayjs from 'dayjs';
import advancedFormat from 'dayjs-plugin-advanced-format';

dayjs.extend(advancedFormat);

3. 配置Datepicker的格式
   此时就能直接使用"dddd, MMMM Do YYYY"格式，和v4中MomentUtils的写法一致，示例代码：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function OrdinalDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        format="dddd, MMMM Do YYYY"
        label="选择日期"
      />
    </LocalizationProvider>
  );
}

有效输入格式的查询方法 #

• 基础格式：直接参考Day.js的原生格式规则，比如YYYY（4位年份）、MMMM（完整月份名称）、dddd（完整星期名称）等，这些是Day.js默认支持的格式。
• 扩展格式：如果需要Do这类特殊格式，要查看对应的Day.js扩展插件文档，比如advanced-format插件还支持Wo（季度序数）等格式。
• Material UI适配逻辑：Datepicker的格式完全依赖于所使用的日期适配器（如AdapterDayjs），所以所有有效格式就是适配器对应的日期库（Day.js）支持的格式，无需额外查Material UI文档，直接以Day.js的格式规则为准。

内容的提问来源于stack exchange，提问作者GLP