[FIX] Locale reactivity

chronotruck · Mar 15, 2019 · 3113258 · 3113258
1 parent 0f8e783
commit 3113258
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -64,6 +64,7 @@
                 input-size="lg"
                 color="purple"
                 :dark="darkMode"
+                locale="fr"
                 right
               />
             </div>

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
@@ -188,7 +188,6 @@
       return {
         transitionDaysName: 'slidenext',
         transitionLabelName: 'slidevnext',
-        weekDays: getWeekDays(this.locale, this.firstDayOfWeek),
         selectingYearMonth: null,
         isKeyboardActive: true
       }
@@ -215,6 +214,9 @@
       },
       year () {
         return `${this.month.getYear()}`
+      },
+      weekDays () {
+        return getWeekDays(this.locale, this.firstDayOfWeek)
       }
     },
     methods: {

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
@@ -16,6 +16,7 @@
       >
         <HeaderPicker
           v-if="!noHeader"
+          :key="componentKey"
           v-model="value"
           :color="color"
           :only-time="onlyTime"
@@ -48,6 +49,7 @@
             :visible="visible"
             :custom-shortcuts="customShortcuts"
             :no-keyboard="noKeyboard"
+            :locale="locale"
             @change-month="changeMonth"
             @change-year-month="changeYearMonth"
             @close="$emit('close')"
@@ -136,7 +138,8 @@
     data () {
       return {
         month: this.getMonth(),
-        transitionName: 'slidevnext'
+        transitionName: 'slidevnext',
+        componentKey: 0
       }
     },
     computed: {
@@ -220,6 +223,10 @@
     watch: {
       value (value) {
         this.month = this.getMonth(value)
+      },
+      locale () {
+        this.month = this.getMonth()
+        this.componentKey += 1
       }
     },
     methods: {

diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -80,14 +80,16 @@
 
   const updateMomentLocale = (locale, firstDayOfWeek) => {
     moment.locale(locale)
-    const firstDayNumber = Number.isInteger(firstDayOfWeek) && firstDayOfWeek === 0
-      ? 7
-      : firstDayOfWeek || moment.localeData(locale).firstDayOfWeek()
-    moment.updateLocale(locale, {
-      week: {
-        dow: firstDayNumber
-      }
-    })
+    if (firstDayOfWeek) {
+      const firstDayNumber = Number.isInteger(firstDayOfWeek) && firstDayOfWeek === 0
+        ? 7
+        : firstDayOfWeek || moment.localeData(locale).firstDayOfWeek()
+      moment.updateLocale(locale, {
+        week: {
+          dow: firstDayNumber
+        }
+      })
+    }
   }
 
   const nearestMinutes = (interval, date, format) => {
@@ -170,8 +172,8 @@
       },
       dateFormatted () {
         const dateFormatted = this.range
-          ? this.getRangeDatesFormatted()
-          : this.getDateFormatted()
+          ? this.getRangeDatesFormatted(this.locale)
+          : this.getDateFormatted(this.locale)
         this.$emit('formatted-value', dateFormatted)
         return dateFormatted
       },
@@ -212,6 +214,9 @@
       open (val) {
         if (this.disabled) return
         this.pickerOpen = val
+      },
+      locale (value) {
+        updateMomentLocale(value, this.firstDayOfWeek)
       }
     },
     mounted () {