[Demo Site] A locale object was not found for the provided string ["en-GB"].

[Joshua-rose]

Describe the bug
The locale example on the demo site is not working correctly. It is using my locale (en-US) instead of the stated locale (en-GB). It is also produces an error. Error reproduced below

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://reactdatepicker.com/#example-locale'
2. Open Dev Tools, (I am using chrome in this instance. However issue is also present in FireFox)
3. Click on the date field
4. View console.

Scroll up or down to reproduce the.

See error in Additional Context

Expected behavior
Expected date popup with correct local (en-GB in this instance).

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome, Firefox
• Version 76.0.3809.100, 68.0.2 respectivly

Additional context
Error procuced from console

backend.js:6 A locale object was not found for the provided string ["en-GB"].
r @ backend.js:6
we @ index.js:403
(anonymous) @ index.js:552
(anonymous) @ index.js:2459
(anonymous) @ index.js:2445
(anonymous) @ index.js:2442
(anonymous) @ index.js:2654
(anonymous) @ index.js:2708
value @ index.js:2836
yi @ react-dom.production.min.js:3880
mi @ react-dom.production.min.js:3871
Jo @ react-dom.production.min.js:6116
Wo @ react-dom.production.min.js:5101
Ho @ react-dom.production.min.js:4958
Fo @ react-dom.production.min.js:4817
(anonymous) @ react-dom.production.min.js:2543
a.unstable_runWithPriority @ scheduler.production.min.js:338
cr @ react-dom.production.min.js:2513
Rr @ react-dom.production.min.js:2538
hr @ react-dom.production.min.js:2528
Ie @ react-dom.production.min.js:6706
Bn @ react-dom.production.min.js:1817
Ln @ react-dom.production.min.js:1790

[Joshua-rose]

Closed with #1872

[Snazzie]

Yep, this is silly.

[Snazzie]

This isnt fixed, even on your demo site with "en-GB" your input is still "en-US". i also get this console warning with "en-US" as locale.

[owainharris]

Same issue - not fixed.

[jimsheen]

Bump

[wviveiro]

From his commit on issue #1872 I checked he did 2 things:

1. Import the locale from date-fns to the code

import enGB from "date-fns/locale/en-GB";

2. Register the locale using react-datepicker function when component is mounted

registerLocale('gn-GB', enGB);

So, in order to make it work in my code, I did the following:

import React, { useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import enGB from "date-fns/locale/en-GB";


// REACT HOOK
const MyDatePicker = () => {
    useEffect(() => {
        registerLocale("en-GB", enGB);
    }, []);

    return (
        <DatePicker
            locale={'en-GB'}
        />
    );
};

// React Component
class MyDatePickerComponent extends React.Component {
    componentDidMount() {
        registerLocale("en-GB", enGB);
    }
    render() {
        return (
            <DatePicker
                locale={'en-GB'}
            />
        );
    }
}

[LaurenceRSkoropinski]

For me adding dateFormat="P" to wviveiro code to get correct Format for GB, see https://date-fns.org/v2.21.2/docs/format

<DatePicker
      locale="en-GB"
      dateFormat="P"
    />

[janmisek1]

Still not fixed. registerLocale solve the problem for future renders, but the first render is always with console warning.

[D-Thrane]

Still a problem

[jorgemustafa]

Still a problem with pt-BR too

[asafcraftio]

If the issue is changing the start date of the week.
there is a prop at the bottom of the list that can be used (without any need to use date-fns at all, in this example Monday is the first day of the week:

<DatePicker
  calendarStartDay={1}
/>

[lukaskvapil]

For anyone why the localisation is not working in the input field, there are actually separate 2 things going on here:

• one is format of the calendar popup - that is determined by the locale property which needs to register the relevant locale using the registerLocale function, as done Include en-GB in Example to provide the functionality on the Demo site #1872. It is also mentioned in the README
• however, what appears in the input field is determined by the dateFormat property which accepts date-fns formatting. To have the localised version, you can use the dateFormat="P", which then uses formatting according to provided locale.

For fully localized datepicker, both are needed:

import React, { useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import enGB from "date-fns/locale/en-GB";

const MyDatePicker = () => {
    useEffect(() => {
        registerLocale("en-GB", enGB);
    }, []);

    return (
        <DatePicker
            locale={'en-GB'}
            dateFormat="P"
        />
    );
};

[brunomistro]

For anyone why the localisation is not working in the input field, there are actually separate 2 things going on here:

• one is format of the calendar popup - that is determined by the locale property which needs to register the relevant locale using the registerLocale function, as done Include en-GB in Example to provide the functionality on the Demo site #1872. It is also mentioned in the README
• however, what appears in the input field is determined by the dateFormat property which accepts date-fns formatting. To have the localised version, you can use the dateFormat="P", which then uses formatting according to provided locale.

For fully localized datepicker, both are needed:

import React, { useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import enGB from "date-fns/locale/en-GB";

const MyDatePicker = () => {
    useEffect(() => {
        registerLocale("en-GB", enGB);
    }, []);

    return (
        <DatePicker
            locale={'en-GB'}
            dateFormat="P"
        />
    );
};

still a problem, but this is the best solution