如何在Material UI Datepicker 6中设置一周起始为周一？

问题描述 #

使用Material UI Datepicker 6版本，需要将日历的一周起始日设置为周一，当前默认以周日作为起始，尝试多种方法未解决，现有代码如下：

import React from "react";
import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import moment, { Moment } from "moment";
import { setDefaultOptions } from "date-fns";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { enGB } from "date-fns/locale";

interface props {
  value: Moment | null;
  onChange: (newValue: Moment | null) => void;
  placeholder: string;
}

export default function DatePicker({ value, onChange, placeholder }: props) {
  // setDefaultOptions({ locale: enGB })
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
      <DatePickerDestop
        slotProps={{
          textField: {
            placeholder,
            size: "small",
            fullWidth: false
          },
        }}
        className="dateBlock"
        value={value}
        onChange={onChange}
      />
    </LocalizationProvider>
  );
}

代码问题分析 #

• 日期库与适配器不匹配：代码使用AdapterDayjs（dayjs适配器），但value类型却是Moment，同时引入moment库，混用不同日期库会导致逻辑冲突，locale配置无法生效。
• locale配置未正确加载：设置了adapterLocale="de"但未引入dayjs对应的locale文件，且date-fns的setDefaultOptions对dayjs适配器完全无效。

解决方案 #

根据使用的适配器类型，选择以下两种方案之一：

方案一：使用Dayjs适配器（推荐）

1. 确保安装dayjs依赖：

npm install dayjs

2. 统一日期类型为Dayjs，引入对应locale并配置：

import React from "react";
import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
// 引入以周一为起始日的locale，比如en-gb
import "dayjs/locale/en-gb";

interface props {
  value: Dayjs | null;
  onChange: (newValue: Dayjs | null) => void;
  placeholder: string;
}

export default function DatePicker({ value, onChange, placeholder }: props) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
      <DatePickerDestop
        slotProps={{
          textField: {
            placeholder,
            size: "small",
            fullWidth: false
          },
        }}
        className="dateBlock"
        value={value}
        onChange={onChange}
      />
    </LocalizationProvider>
  );
}

方案二：使用Moment适配器

若需继续使用moment，替换为Moment适配器并配置locale：

1. 确保安装moment依赖：

npm install moment

2. 修改代码如下：

import React from "react";
import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import moment, { Moment } from "moment";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
// 引入以周一为起始日的locale，比如en-gb
import "moment/locale/en-gb";

interface props {
  value: Moment | null;
  onChange: (newValue: Moment | null) => void;
  placeholder: string;
}

export default function DatePicker({ value, onChange, placeholder }: props) {
  moment.locale("en-gb");
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en-gb">
      <DatePickerDestop
        slotProps={{
          textField: {
            placeholder,
            size: "small",
            fullWidth: false
          },
        }}
        className="dateBlock"
        value={value}
        onChange={onChange}
      />
    </LocalizationProvider>
  );
}

说明 #

• en-gb、de等locale的一周起始日均为周一，可根据需求选择对应locale。
• 必须保证日期库、适配器、类型三者统一，避免混用导致配置失效。

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