adampblack
commented
5 years ago This issue seems to be a Chrome related issue.
Related to this JS method: How does toLocaleDateString() work in Chrome? https://stackoverflow.com/questions/14835858/how-does-tolocaledatestring-work-in-chrome
It works fine in Safari.
I will build a pure JS implementation of the Calendar grommet widget.
Originally posted in Grommet Slack channel - not resolved
Calendar component - what locales does grommet v2 support? I have tried en-US, zh-cn, es-es and all working. I need a couple of obscure ones (km-kh and lo-la) but don't seem to be working.
Weirdly it is working fine here https://codesandbox.io/s/grommet-sandbox-6khc3 - but could not find a package which is providing these extra locales
Code Example 1
Code Example 2 <FormField component={Calendar} locale="lo-la" name="birth_date" />
The month name is still in English (unlike in the example in CodePen from original link). I am wondering if I am missing a locale dependency library.
Only response from Grommet Slack channel This is the library grommet is using for date-formatting https://github.com/zloirock/core-js/#date-formatting. Please share a markup of the code where the locales are not working, I think it should supposed to work.
packages.json { "name": "abc", "version": "0.1.0", "private": true, "dependencies": { "@apollo/react-hooks": "^3.0.1", "apollo-boost": "^0.4.3", "apollo-cache-inmemory": "^1.6.2", "apollo-client": "^2.6.2", "apollo-link-http": "^1.5.15", "apollo-link-ws": "^1.0.18", "aws-amplify": "^1.1.28", "aws-amplify-react": "^2.3.8", "dompurify": "^1.0.11", "graphql": "^14.3.1", "graphql-tag": "^2.10.1", "grommet": "^2.7.3", "grommet-icons": "^4.3.0", "i18next": "^17.0.18", "i18next-browser-languagedetector": "^3.0.3", "i18next-xhr-backend": "^3.2.0", "mapbox-gl": "^1.0.0", "material-icons-react": "^1.0.4", "prop-types": "latest", "radium": "^0.25.2", "react": "^16.8.6", "react-apollo": "^2.5.6", "react-dom": "^16.8.6", "react-geolocated": "^2.5.0", "react-i18next": "^10.13.1", "react-mapbox-gl": "^4.4.0", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1", "styled-components": "^4.3.2", "subscriptions-transport-ws": "^0.9.16" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "eslint-config-airbnb": "^18.0.1", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.14.3", "react-devtools": "^4" } }