From 666d02827cf062b7970e6657fc6d78977159a6fe Mon Sep 17 00:00:00 2001
From: Mazel <mazuel.loic@gmail.com>
Date: Fri, 15 Mar 2019 11:42:56 +0100
Subject: [PATCH] :fr: [fix] Locale reactivity (#145)

* [FIX] Locale reactivity

* update version tag

* update doc
---
 package.json                                  |  2 +-
 src/App.vue                                   |  3 ++-
 .../_subs/DatePicker/index.vue                |  4 ++-
 .../_subs/PickersContainer/index.vue          |  9 ++++++-
 src/VueCtkDateTimePicker/index.vue            | 25 +++++++++++--------
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 36b8b929..9ee29386 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <loic.mazuel@chronotruck.com>",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index da0a018f..22e6b117 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,6 +64,7 @@
                 input-size="lg"
                 color="purple"
                 :dark="darkMode"
+                locale="fr"
                 right
               />
             </div>
@@ -252,7 +253,7 @@
           'minDate', 'maxDate', 'inputSize', 'buttonNowTranslation', 'disabledWeekly'
         ],
         optionsNotEditable: [
-          'customShortcuts', 'disabledDates', 'disabledHours'
+          'customShortcuts', 'disabledDates', 'disabledHours', 'locale'
         ],
         intOptions: [
           'minuteInterval', 'firstDayOfWeek'
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
index 816eacba..b24bd6b7 100644
--- 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
index 82e0e0d7..1bccf13d 100644
--- 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
index 12cf2dfa..591b93c0 100644
--- 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 () {