From c92fd4c832bd59a47a3e3db903199792c39d2ba5 Mon Sep 17 00:00:00 2001
From: SimonPavlik <simon.pavlik@gmail.com>
Date: Mon, 30 Dec 2019 17:51:11 +0100
Subject: [PATCH] language prop for setting locale in DatePicker components

---
 src/components/DatePickerRange.react.js  | 11 +++++++++++
 src/components/DatePickerSingle.react.js | 11 +++++++++++
 src/fragments/DatePickerRange.react.js   |  3 ++-
 src/fragments/DatePickerSingle.react.js  |  7 ++++---
 src/utils/convertToMoment.js             | 14 ++++++++++++++
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index 58560c6c9..3ac23340e 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -261,6 +261,16 @@ DatePickerRange.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+    /**
+     * The language used to set locale globally.
+     * Pass the default parameter `auto` to use the browser's default language.
+     * For example: `language='en'` sets the default locale of this component globally to English.
+     * Important: The same locale needs to be set for ALL DatePicker components located on the same page!
+     * This limitation is caused by the fact that locale is being set GLOBALLY.
+     * See https://momentjs.com/docs/#/i18n/ for details.
+     */
+    language: PropTypes.string,
 };
 
 DatePickerRange.defaultProps = {
@@ -278,6 +288,7 @@ DatePickerRange.defaultProps = {
     updatemode: 'singledate',
     persisted_props: ['start_date', 'end_date'],
     persistence_type: 'local',
+    language: 'auto',
 };
 
 export const propTypes = DatePickerRange.propTypes;
diff --git a/src/components/DatePickerSingle.react.js b/src/components/DatePickerSingle.react.js
index 3391e430f..1e7b95767 100644
--- a/src/components/DatePickerSingle.react.js
+++ b/src/components/DatePickerSingle.react.js
@@ -218,6 +218,16 @@ DatePickerSingle.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+    /**
+     * The language used to set locale globally.
+     * Pass the default parameter `auto` to use the browser's default language.
+     * For example: `language='en'` sets the default locale of this component globally to English.
+     * Important: The same locale needs to be set for ALL DatePicker components located on the same page!
+     * This limitation is caused by the fact that locale is being set GLOBALLY.
+     * See https://momentjs.com/docs/#/i18n/ for details.
+     */
+    language: PropTypes.string,
 };
 
 DatePickerSingle.defaultProps = {
@@ -235,6 +245,7 @@ DatePickerSingle.defaultProps = {
     disabled: false,
     persisted_props: ['date'],
     persistence_type: 'local',
+    language: 'auto',
 };
 
 export const propTypes = DatePickerSingle.propTypes;
diff --git a/src/fragments/DatePickerRange.react.js b/src/fragments/DatePickerRange.react.js
index aed8e3d41..c4947852e 100644
--- a/src/fragments/DatePickerRange.react.js
+++ b/src/fragments/DatePickerRange.react.js
@@ -4,11 +4,12 @@ import React, {Component} from 'react';
 import uniqid from 'uniqid';
 
 import {propTypes, defaultProps} from '../components/DatePickerRange.react';
-import convertToMoment from '../utils/convertToMoment';
+import convertToMoment, {setLocaleGlobally} from '../utils/convertToMoment';
 
 export default class DatePickerRange extends Component {
     constructor(props) {
         super(props);
+        setLocaleGlobally(this.props.language);
         this.propsToState = this.propsToState.bind(this);
         this.onDatesChange = this.onDatesChange.bind(this);
         this.isOutsideRange = this.isOutsideRange.bind(this);
diff --git a/src/fragments/DatePickerSingle.react.js b/src/fragments/DatePickerSingle.react.js
index ba1674534..f669f0394 100644
--- a/src/fragments/DatePickerSingle.react.js
+++ b/src/fragments/DatePickerSingle.react.js
@@ -5,11 +5,12 @@ import moment from 'moment';
 import React, {Component} from 'react';
 
 import {propTypes, defaultProps} from '../components/DatePickerSingle.react';
-import convertToMoment from '../utils/convertToMoment';
+import convertToMoment, {setLocaleGlobally} from '../utils/convertToMoment';
 
 export default class DatePickerSingle extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
+        setLocaleGlobally(this.props.language);
         this.isOutsideRange = this.isOutsideRange.bind(this);
         this.onDateChange = this.onDateChange.bind(this);
         this.state = {focused: false};
diff --git a/src/utils/convertToMoment.js b/src/utils/convertToMoment.js
index 5b7927b1d..0999dfed5 100644
--- a/src/utils/convertToMoment.js
+++ b/src/utils/convertToMoment.js
@@ -1,6 +1,20 @@
 import moment from 'moment';
 import {has} from 'ramda';
 
+/**
+ * Set locale globally based on `language` parameter.
+ * Pass `language` parameter `auto` to use the browser's default language.
+ * See https://momentjs.com/docs/#/i18n/ for details.
+ *
+ * @param {string} language
+ */
+export const setLocaleGlobally = (language) => {
+    if (language === "auto") {
+        language = window.navigator.language || 'en';
+    }
+    moment.locale(language);
+};
+
 export default (newProps, momentProps) => {
     const dest = {};