From a75e8f34d608c167f8d429ddbf39e94173204a61 Mon Sep 17 00:00:00 2001
From: Antoine <41809103+antoinecfmws@users.noreply.github.com>
Date: Fri, 24 Apr 2020 11:29:22 -0400
Subject: [PATCH] fix(datetime): locale inputs are now reactive (#20826)

fixes #20367
---
 core/src/components/datetime/datetime.tsx     |  6 +++++
 .../components/datetime/test/basic/index.html | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e703bcc02a..830fbc2db6 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -303,6 +303,12 @@ export class Datetime implements ComponentInterface {
 
   private generatePickerOptions(): PickerOptions {
     const mode = getIonMode(this);
+    this.locale = {
+      monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
+      monthShortNames: convertToArrayOfStrings(this.monthShortNames, 'monthShortNames'),
+      dayNames: convertToArrayOfStrings(this.dayNames, 'dayNames'),
+      dayShortNames: convertToArrayOfStrings(this.dayShortNames, 'dayShortNames')
+    };
     const pickerOptions: PickerOptions = {
       mode,
       ...this.pickerOptions,
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index c5c1323c33..8164b5f190 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -94,6 +94,14 @@
           <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000" display-format="DDD. MMM DD, YY" month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
         </ion-item>
 
+        <ion-item>
+          <ion-label>DDD. MMM DD, YY (English/French switch)</ion-label>
+          <ion-datetime id="customMonthShortNames" value="1995-04-15" min="1990-02" max="2000"
+            display-format="DDD. MMM DD, YY"></ion-datetime>
+          <ion-button slot="end" onclick="toggleLanguage()">Language Selected: <span id="selectedLang">en</span>
+          </ion-button>
+        </ion-item>
+
         <ion-item>
           <ion-label>D MMM YYYY H:mm</ion-label>
           <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
@@ -227,6 +235,24 @@
         el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
+
+      var monthShortNamesEnglish = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+      var monthShortNamesFrench = ["jan", "fév", "mar", "avr", "mai", "jui", "jui", "aou", "sep", "oct", "nov", "déc"];
+
+      var selectedLang = "en";
+      var customDayShortNames = document.getElementById('customMonthShortNames');
+      customDayShortNames.monthShortNames = monthShortNamesEnglish;
+      
+      function toggleLanguage() {
+        selectedLang = selectedLang === 'en' ? 'fr' : 'en';
+        
+        var customMonthShortNames = document.getElementById('customMonthShortNames');
+        var el = document.getElementById('selectedLang');
+
+        el.innerText = selectedLang;
+        if (selectedLang === 'en') { customMonthShortNames.monthShortNames = monthShortNamesEnglish; }
+        else { customMonthShortNames.monthShortNames = monthShortNamesFrench; }
+      }
     </script>
   </ion-app>
 </body>