How to make react-datepicker start the days of the week on Monday?

Question

I'm using react-datepicker along with date-fns to display a date picker with Hungarian locale in my Web app, but I couldn't find a way for it to display the dates of the week starting with Monday instead of Sunday as per Hungarian conventions. The datepicker looks like this (V is short for Vasárnap, which of course means Sunday):

Here is the code the code I used to render it:

import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import hu from "date-fns/locale/hu";

registerLocale("hu", hu);

export function CustomDatepicker(props) {
    return (
        <DatePicker className="form-control" selected={props.date} 
        onChange={ props.onChange } dropdownMode="select"
        dateFormat="yyyy.MM.dd." todayButton="Ma" closeOnScroll={true}
        locale="hu" />
    );
}

One idea that I also tried to make this work is the following code (with a modification of the number 0 to 1) that I found in this GitHub issue:

registerLocale("hu", { ...hu, options: { ...hu.options, weekStartsOn: 1 } });

Is there any other way to make this work or should I use a different package for localization?

Sawfish

Answer 1

All you need to pass an additional prop (calendarStartDay={1}) to DatePicker

import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import hu from "date-fns/locale/hu";

registerLocale('hu', hu);
function App(props) {
  return (
    <div className="App">
      <DatePicker
        className="form-control"
        selected={props.date}
        onChange={props.onChange}
        dropdownMode="select"
        dateFormat="yyyy.MM.dd."
        todayButton="Ma"
        closeOnScroll={true}
        locale="hu"
       calendarStartDay={1}
      />
    </div>
  );
}

export default App;

Inhumanity

Answer 2

For the recent version of arqex/react-datetime

You have to use following example to start your week from Monday.

import moment from 'moment';
import enGb from 'moment/locale/en-gb';

<Datetime
  name="selectedDate"
  value={moment(selectedDate)}
  timeFormat={false}
  locale={moment.locale()}
  utc={false}
  dateFormat="ddd MMM Do YYYY"
/>

Plumy