v4.1

- fecha i18n correct configuration - Italian added on demo (dev) page - new prop `yearBeforeMonth`
ZestfulNation · Jan 14, 2021 · 7b2d2b1 · 7b2d2b1
1 parent 1ea1b6e
commit 7b2d2b1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 49 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -6,8 +6,9 @@
       <select v-model="language">
         <option value="en">English</option>
         <option value="es">Español</option>
-        <option value="pt">Português</option>
         <option value="fr">Français</option>
+        <option value="it">Italiano</option>
+        <option value="pt">Português</option>
       </select>
     </div>
     <div class="container">
@@ -259,6 +260,7 @@ import pt from './i18n/pt'
 import fr from './i18n/fr'
 import en from './i18n/en'
 import es from './i18n/es'
+import it from './i18n/it'
 
 export default {
   name: 'Examples',
@@ -378,7 +380,7 @@ export default {
       currentWidth: window.innerWidth,
       boxShow: 0,
       language: 'en',
-      languages: { pt, fr, en, es },
+      languages: { pt, fr, en, es, it },
       alwaysVisible: false,
       firstDayOfWeek: 0,
       gridStyle: true,

diff --git a/src/DatePicker/HotelDatePicker.vue b/src/DatePicker/HotelDatePicker.vue
@@ -632,19 +632,12 @@ export default {
         this.setCheckOut(null)
       }
     },
+    i18n() {
+      this.configureI18n()
+    },
   },
   created() {
-    fecha.i18n = {
-      dayNames: this.i18n['day-names'],
-      dayNamesShort: this.shortenString(this.i18n['day-names'], 3),
-      monthNames: this.i18n['month-names'],
-      monthNamesShort: this.shortenString(this.i18n['month-names'], 3),
-      amPm: ['am', 'pm'],
-      // D is the day of the month, function returns something like...  3rd or 11th
-      DoFn(D) {
-        return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : ((D - (D % 10) !== 10) * D) % 10]
-      },
-    }
+    this.configureI18n()
     this.generateInitialMonths()
   },
   mounted() {
@@ -681,6 +674,19 @@ export default {
   methods: {
     ...Helpers,
     transformDisabledWeekDays() {},
+    configureI18n() {
+      fecha.setGlobalDateI18n({
+        dayNames: this.i18n['day-names'],
+        dayNamesShort: this.shortenString(this.i18n['day-names'], 3),
+        monthNames: this.i18n['month-names'],
+        monthNamesShort: this.shortenString(this.i18n['month-names'], 3),
+        amPm: ['am', 'pm'],
+        // D is the day of the month, function returns something like...  3rd or 11th
+        DoFn(D) {
+          return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : ((D - (D % 10) !== 10) * D) % 10]
+        },
+      })
+    },
     generateInitialMonths() {
       this.months = []
 
@@ -1247,10 +1253,16 @@ export default {
       this.checkOut = date
     },
     getMonth(date) {
-      const year = this.showYear ? fecha.format(date, ' YYYY') : ''
-      const month = this.i18n['month-names'][fecha.format(date, 'M') - 1]
-      const leyend = this.yearBeforeMonth ? `${year} ${month}` : `${month} ${year}`
-      return leyend.trim()
+      const month = 'MMMM'
+      const year = 'YYYY'
+      let format = month
+      // const i18n = { monthNames: this.i18n['month-names'] }
+
+      if (this.showYear) {
+        format = this.yearBeforeMonth ? `${year} ${month}` : `${month} ${year}`
+      }
+
+      return fecha.format(date, format).trim()
     },
     createMonth(date) {
       const firstDay = this.getFirstDay(date, this.firstDayOfWeek)

diff --git a/src/helpers.js b/src/helpers.js
@@ -23,8 +23,8 @@ export default {
   nextDateByDayOfWeek(weekDay, referenceDate, i18n) {
     const newReferenceDate = new Date(referenceDate)
     let newWeekDay = weekDay.toLowerCase()
-    // const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
-    const days = i18n ? i18n['day-names'] : ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
+    const daysDefault = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
+    const days = i18n ? i18n['day-names'] : daysDefault
     const referenceDateDay = newReferenceDate.getDay()
 
     for (let i = 7; ; i--) {

diff --git a/src/i18n/it.js b/src/i18n/it.js
@@ -1,31 +1,30 @@
 export default {
-    night: 'Notte',
-    nights: 'Notti',
-    week: 'Settimana',
-    weeks: 'Settimane',
-    'day-names': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
-    'check-in': 'Check-in',
-    'check-out': 'Check-out',
-    'month-names': [
-      'Gennaio',
-      'Febbraio',
-      'Marzo',
-      'Aprile',
-      'Maggio',
-      'Giugno',
-      'Luglio',
-      'Agosto',
-      'Settembre',
-      'Ottobre',
-      'Novembre',
-      'Dicembre',
-    ],
-    tooltip: {
-      halfDayCheckIn: 'Check-in Disponibile',
-      halfDayCheckOut: 'Check-out Disponibile',
-      saturdayToSaturday: 'Solo da Sabato a Sabato',
-      sundayToSunday: 'Solo da Domenica a Domenica',
-      minimumRequiredPeriod: '%{minNightInPeriod} %{night} minimo.',
-    },
-  }
-
+  night: 'Notte',
+  nights: 'Notti',
+  week: 'Settimana',
+  weeks: 'Settimane',
+  'day-names': ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
+  'check-in': 'Check-in',
+  'check-out': 'Check-out',
+  'month-names': [
+    'Gennaio',
+    'Febbraio',
+    'Marzo',
+    'Aprile',
+    'Maggio',
+    'Giugno',
+    'Luglio',
+    'Agosto',
+    'Settembre',
+    'Ottobre',
+    'Novembre',
+    'Dicembre',
+  ],
+  tooltip: {
+    halfDayCheckIn: 'Check-in Disponibile',
+    halfDayCheckOut: 'Check-out Disponibile',
+    saturdayToSaturday: 'Solo da Sabato a Sabato',
+    sundayToSunday: 'Solo da Domenica a Domenica',
+    minimumRequiredPeriod: '%{minNightInPeriod} %{night} minimo.',
+  },
+}