inrupt · james-martin-jd · Dec 12, 2019 · Dec 10, 2019 · Dec 10, 2019 · Dec 10, 2019
diff --git a/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js b/src/lib/components/FormModel/children/Form/UI/DateTimePicker/date-time-picker.component.js
@@ -9,7 +9,7 @@ import { ErrorMessage } from './date-time.styles';
 
 import { FormModelConfig } from '@context';
 import { UITypes, FormModelUI, DATE_FORMAT } from '@constants';
-import { getLocale, parseInitialValue, isValidDate } from '@utils';
+import { parseInitialValue, isValidDate, getClosestLocale } from '@utils';
 
 const DateTimePicker = React.memo(
   ({ id, value, modifyFormObject, formObject, onSave, autoSave, onBlur, ...rest }) => {
@@ -129,21 +129,11 @@ const DateTimePicker = React.memo(
       dateOptions = { minDate, maxDate, dateFormat: 'P' };
     }
 
-    /* transform the browser  locale code to match the date-fns format
-       browser format samples: 'es', 'en-US', 'en-GB'
-       date-fns format samples: 'es', 'enUS', 'enGB' */
-    let locale = getLocale().split('-');
-    if (locale[1]) {
-      locale[1] = locale[1].toUpperCase();
-      locale = `${locale[0]}${locale[1]}`;
-    } else {
-      locale = `${locale[0]}`;
-    }
-
+    const locale = getClosestLocale();
     try {
-      registerLocale(locale, locales[locale]);
+      registerLocale(locale.code, locale);
     } catch (e) {
-      registerLocale(locale, locales.enUS);
+      registerLocale('en-US', locales.enUS);
     }
 
     return (
@@ -159,7 +149,7 @@ const DateTimePicker = React.memo(
                 onChange,
                 className: theme && theme.inputText,
                 onBlur,
-                locale
+                locale: locale.code
               }}
             />
             {invalidate && <ErrorMessage>{invalidate}</ErrorMessage>}

diff --git a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
@@ -3,20 +3,30 @@ import { format } from 'date-fns';
 
 import { FormModelConfig } from '@context';
 import { UITypes, FormModelUI } from '@constants';
+import { getClosestLocale } from '@utils';
 
 import { Wrapper, Label, Value } from './date-line.style';
 
 const DateLine = ({ value, ...rest }: { value: String }) => {
   const type = rest[FormModelUI.RDF_TYPE];
+  const locale = getClosestLocale();
 
   let renderValue;
-  if (value) {
+  try {
     if (type === UITypes.DateTimeField) {
-      renderValue = format(new Date(value), 'Pp');
-    } else {
-      renderValue = value;
+      renderValue = format(new Date(value), 'Pp', { locale });
     }
-  } else {
+
+    if (type === UITypes.DateField) {
+      const [year, month, day] = value.split('-').map(n => Number(n));
+      renderValue = format(new Date(year, month - 1, day), 'P', { locale });
+    }
+
+    if (type === UITypes.TimeField) {
+      const [hours, minutes, seconds] = value.split(':').map(n => Number(n));
+      renderValue = format(new Date(2000, 0, 1, hours, minutes, seconds), 'p', { locale });
+    }
+  } catch {
     renderValue = '';
   }
 

diff --git a/src/lib/utils/datetimes.js b/src/lib/utils/datetimes.js
@@ -1,4 +1,6 @@
 import { addHours, setHours, setMinutes, setSeconds } from 'date-fns';
+import * as locales from 'date-fns/locale';
+
 import { UITypes } from '@constants';
 
 /**
@@ -56,3 +58,36 @@ export const getLocale = (): string => {
   if (navigator.languages !== undefined) return navigator.languages[0];
   return navigator.language ? navigator.language : 'en-US';
 };
+
+/**
+ * gets and transform the browser locale to match the date-fns locale name
+ * e.g.: browser format: `en-US`
+ *       date-fns format: `enUS`
+ *
+ * @returns string the matching locale name, if found, enUS otherwise
+ */
+export const getFormattedLocale = (): string => {
+  const locale = getLocale().split('-');
+  if (locale.length > 1) {
+    locale[1] = locale[1].toUpperCase();
+    return `${locale[0]}${locale[1]}`;
+  }
+  return `${locale[0]}`;
+};
+
+/**
+ * tries to get the closest locale object based on the browser locale
+ * e.g.: `en-US` -> locales[`enUS`]
+ *       `es-CR` -> locales[`es`]
+ * @returns {Locale | enUS} the closest found locale object
+ */
+export const getClosestLocale = (): string => {
+  const firstOption = locales[getFormattedLocale()];
+  if (firstOption) return firstOption;
+
+  const browserLocale = getLocale();
+  const secondOption = locales[browserLocale.split('-')[0]];
+  if (secondOption) return secondOption;
+
+  return locales.enUS;
+};
diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js
@@ -2,7 +2,13 @@ import SolidError from './error';
 import * as shexUtil from './shex';
 import solidResponse from './statusMessage';
 import ShexFormValidator from './shexFormValidator';
-import { parseInitialValue, getLocale, isValidDate } from './datetimes';
+import {
+  parseInitialValue,
+  getLocale,
+  isValidDate,
+  getFormattedLocale,
+  getClosestLocale
+} from './datetimes';
 
 import {
   fetchSchema,
@@ -30,5 +36,7 @@ export {
   getBasicPod,
   getLocale,
   parseInitialValue,
-  isValidDate
+  isValidDate,
+  getFormattedLocale,
+  getClosestLocale
 };