如何让 react-datepicker 在星期一开始一周中的几天？答案

【问题标题】：How to make react-datepicker start the days of the week on Monday?如何让 react-datepicker 在星期一开始一周中的几天？
【发布时间】：2021-09-14 19:01:59
【问题描述】：

我正在使用 react-datepicker 和 date-fns 在我的 Web 应用程序中显示具有匈牙利语言环境的日期选择器，但我无法找到一种方法来显示从星期一开始的一周中的日期，而不是周日按照匈牙利惯例。日期选择器看起来像这样（V 是 Vasárnap 的缩写，当然意思是星期日）：

这是我用来渲染它的代码：

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

我也尝试过完成这项工作的一个想法是我在this GitHub issue 中找到的以下代码（将数字 0 修改为 1）：

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

有没有其他方法可以完成这项工作，或者我应该使用不同的包进行本地化？

【问题讨论】：

标签： reactjs react-datepicker date-fns

【解决方案1】：

您只需将额外的道具 (calendarStartDay={1}) 传递给 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;

【讨论】：