微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何让 react-datepicker 在星期一开始一周中的几天?

我正在使用 react-datepickerdate-fns 在我的网络应用程序中显示一个带有匈牙利语区域设置的日期选择器,但我找不到一种方法显示一周的开始日期按照匈牙利惯例,星期一而不是星期日。日期选择器看起来像这样(V 是 Vasárnap 的缩写,当然意味着星期天):

react-datepicker with Hungarian locale

这是我用来渲染它的代码

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

有没有其他方法可以使这项工作正常进行,或者我应该使用不同的包进行本地化吗?

解决方法

您需要将额外的道具 (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;

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。