Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting attribute locale={"en-US"} throws 391-395 console warnings #3781

Open
n-glaz opened this issue Sep 29, 2022 · 1 comment
Open

Setting attribute locale={"en-US"} throws 391-395 console warnings #3781

n-glaz opened this issue Sep 29, 2022 · 1 comment

Comments

@n-glaz
Copy link

n-glaz commented Sep 29, 2022

Describe the bug
Setting ReactDatePicker's locale attribute to 'en-US' or "en-US" causes 395 warnings to be thrown in the console when the datepicker is interacted with.

Dates still appear to be displayed properly as per the locale.

To Reproduce

import ReactDatePicker from "react-datepicker";

export const PageWithDatepicker = () => {
    <>
        <ReactDatePicker
            locale={'en-US'}
            placeholderText="Select date"
         />
    </>
}

Expected behavior

I expect to not get 395 console errors when setting the locale attribute to 'en-US'.

Screenshots

Screen Shot 2022-09-29 at 4 23 34 PM

Desktop (please complete the following information):

  • OS: macOS 12.5.1
  • Browser: Chrome 105
  • Version: "react-datepicker": "^4.8.0"
@fedemp
Copy link

fedemp commented Oct 3, 2022

According to the README, you have to import the corresponding locales from date-fns.

import { useState } from "react";
import { createRoot } from "react-dom/client";
import DatePicker, { registerLocale } from "react-datepicker";
import es from 'date-fns/locale/en-US';
registerLocale('en-US', es)
import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = (): JSX.Element => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      locale="en-US"
      selected={startDate}
      onChange={(date) => date && setStartDate(date)}
    />
  );
};

const container = document.querySelector("#app")!;
const root = createRoot(container);

root.render(<Example />);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants