在 mui datepicker 6 中将 dayOfWeek 设置为星期一

Question

我正在使用 Material ui Datepicker 6 版本，我想设置从星期一开始的 dayOfWeek。

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>
  );
}

现在一开始是这样显示周日的

我一开始想要星期一，自从上周以来我已经尝试了很多事情，但没有任何效果。

Answer 1

当您使用AdapterDayjs时，您可以更改weekStart其区域设置，使日历从星期一开始，而不是默认的星期日

...

import dayjs from "dayjs";

import updateLocale from "dayjs/plugin/updateLocale";

dayjs.extend(updateLocale);

dayjs.updateLocale("en", {
  weekStart: 1
});

...

https://codesandbox.io/s/compassionate-poitras-k5h7hp