Merge pull request #157 from pegasystems/bug/tor/-BUG-813490

Fix placeholder not being localized in Date component

Author: vishalshrm539

packages/react-sdk-components/src/components/helpers/date-format-utils.ts

@@ -1,16 +1,17 @@
 import { getLocale } from './formatters/common';
 
-
 export const dateFormatInfoDefault = {
-  dateFormatString: "MM/DD/YYYY",
-  dateFormatStringLong: "MMM DD, YYYY",
-  dateFormatStringLC: "mm/dd/yyyy",
-  dateFormatMask: "__/__/____"
-}
+  dateFormatString: 'MM/DD/YYYY',
+  dateFormatStringLong: 'MMM DD, YYYY',
+  dateFormatStringLC: 'mm/dd/yyyy',
+  dateFormatMask: '__/__/____'
+};
 
 export const getDateFormatInfo = () => {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
   const theDateFormatInfo = dateFormatInfoDefault;
-  const theLocale = getLocale(); // PCore.getEnvironmentInfo().getUseLocale() || "US-en";
+  const theLocale = getLocale();
 
   // NOTE: this date was chosen since it has a day larger than 12. If you change it,
   //  you'll need to change the indexOf values below!
@@ -25,29 +26,38 @@ export const getDateFormatInfo = () => {
   const locDD = theTestDateLocaleString.indexOf('30');
   const locYYYY = theTestDateLocaleString.indexOf('2023');
 
+  // If localized placeholder exists for one of day/month/year then show it otherwise fall back to ddmmyyyy
+  const localizedPlaceholderExists =
+    localizedVal('month_placeholder', localeCategory) !== 'month_placeholder' ||
+    localizedVal('day_placeholder', localeCategory) !== 'day_placeholder' ||
+    localizedVal('year_placeholder', localeCategory) !== 'year_placeholder';
+
   const arrPieces = [
     {
       loc: locMM,
       format: 'MM',
       longFormat: 'MMM',
-      placeholder: 'mm',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
+      mask: '__',
+      separator: theTestDateLocaleString[locMM+2]
     },
     {
       loc: locDD,
       format: 'DD',
       longFormat: 'DD',
-      placeholder: 'dd',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
+      mask: '__',
+      separator: theTestDateLocaleString[locDD+2]
     },
     {
       loc: locYYYY,
       format: 'YYYY',
       longFormat: 'YYYY',
-      placeholder: 'yyyy',
-      mask: '____'
+      placeholder: localizedPlaceholderExists ? localizedVal('year_placeholder', localeCategory) : 'yyyy',
+      mask: '____',
+      separator: theTestDateLocaleString[locYYYY+4]
     }
-   ];
+  ];
 
   // Sort the associative array by order of appearance (loc) of each piece
   arrPieces.sort((a, b) => {
@@ -57,10 +67,10 @@ export const getDateFormatInfo = () => {
   });
 
   // Construct the structure to return...
-  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}/${arrPieces[1].format}/${arrPieces[2].format}`;
+  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}${arrPieces[0].separator}${arrPieces[1].format}${arrPieces[1].separator}${arrPieces[2].format}`;
   theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
-  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}/${arrPieces[1].placeholder}/${arrPieces[2].placeholder}`;
-  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}/${arrPieces[1].mask}/${arrPieces[2].mask}`;
+  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}${arrPieces[0].separator}${arrPieces[1].placeholder}${arrPieces[1].separator}${arrPieces[2].placeholder}`;
+  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}${arrPieces[0].separator}${arrPieces[1].mask}${arrPieces[1].separator}${arrPieces[2].mask}`;
 
   return theDateFormatInfo;
-}
+};

packages/react-sdk-components/src/components/helpers/formatters/common.ts

@@ -1,8 +1,8 @@
-export function getLocale(locale = "en-US") {
+export function getLocale(locale='') {
   // use locale if specified
   if (locale) return locale;
   // otherwise, use operator locale if it's defined
-  if (PCore.getEnvironmentInfo().getUseLocale()) return PCore.getEnvironmentInfo().getUseLocale();
+  if (PCore.getEnvironmentInfo().getLocale()) return PCore.getEnvironmentInfo().getLocale();
   // fallback
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }