0

I am using material ui Datepicker 6 version and I want to set the dayOfWeek started with monday.

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

Right now it is showing Sunday at first like this

enter image description here

I want Monday at first and I have tried many things since last one week nothing worked.

James Z
  • 12,209
  • 10
  • 24
  • 44
Profer
  • 553
  • 8
  • 40
  • 81

1 Answers1

2

As you are using AdapterDayjs then you can change the weekStart on its locale to make the calendar start from Monday instead of Sunday as default

...

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

tuan.tran
  • 1,781
  • 15
  • 21