Setting Locale in DatePicker Components

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;

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;

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);

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};

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 = {};