🇫🇷 [fix] Locale reactivity (#145)

* [FIX] Locale reactivity

* update version tag

* update doc

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 <[email protected]>",
   "scripts": {

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'

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: {

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: {

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 () {