question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Default locale not being picked up

See original GitHub issue

Expected behaviour

Using setDefaultLocale to en-GB, I would expect the default locale to be the the en-GB format (day/month/year)

Actual behaviour

Display in the en-US format (month/day/year)

Steps to reproduce

Minimal app:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Datepicker, { registerLocale, setDefaultLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { enGB } from "date-fns/esm/locale";

registerLocale("en-GB", enGB);
setDefaultLocale("en-GB");

class App extends Component {
  render() {
    return <Datepicker selected={new Date("2018-12-30")} />;
  }
}

ReactDOM.render(<App />, document.querySelector("body"));

Package.json

{
  "name": "react-datepicker-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.3",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Screenshot: screenshot 2018-12-05 at 13 11 33

Printing getDefaultLocale() in the render also correctly prints en-GB.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
MickMonaghancommented, Feb 14, 2019

This is a significant issue. Changing the locale should by itself be enough to change the presented format. Looks like this applies for all locales - not just en-GB. One should not have to set the dateFormat manually. The locale data imported from date-fns looks like it should be adequate - here’s the en-GB data: https://github.com/date-fns/date-fns/blob/master/src/locale/en-GB/_lib/formatLong/index.js#L7

3reactions
tombiddulphcommented, Dec 12, 2018

For whatever reason the dateFormat prop is still set as MM/dd/yyyy when the locale is set to en-GB. https://github.com/Hacker0x01/react-datepicker/blob/93d4694c50cb894edb3884f802537feeec4c4c66/src/index.jsx#L85

Setting the dateFormat prop to dd/MM/yyyy resolves the issue with or without the locale set to en-GB

class App extends Component {
  render() {
    return <Datepicker 
                   dateFormat="dd/MM/yyyy"
                   selected={new Date("2018-12-30")} />;
  }
}

Read more comments on GitHub >

github_iconTop Results From Across the Web

Locale settings are not right. How can I reset them? - Ask Ubuntu
Seems an update fried locales somehow. The fix I found was to log out, change the language selected before logging in, and logging...
Read more >
defaultLocale is not keeping default lang in Next.js i18n
When localeDetection is set to false Next.js will no longer automatically redirect based on the user's preferred locale and will only provide ...
Read more >
locale not found/setting locale failed - what should I do?
It seems that no locale is generated. Have you selected pl_PL.UTF-8 properly in dpkg-reconfigure locales by pressing space in the corresponding line?
Read more >
WebSphere Application Server JVM instances do not pick up ...
You notice WebSphere Application Server JVM instances do not pick up default locale from user locale if WASService was used to start on...
Read more >
Solved: How to Detect a User's Locale in a Web App | Phrase
One of the most common issues in web app development is detecting a user's locale. This is how to do it the right...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found