year value from Settings.defaultOuputCalendar

src/DatetimePopup.vue

@@ -2,7 +2,7 @@
   <div class="vdatetime-popup">
     <div class="vdatetime-popup__header">
       <div class="vdatetime-popup__title" v-if="title">{{ title }}</div>
-      <div class="vdatetime-popup__year" @click="showYear" v-if="type !== 'time'">{{ year }}</div>
+      <div class="vdatetime-popup__year" @click="showYear" v-if="type !== 'time'">{{ yearLocal }}</div>
       <div class="vdatetime-popup__date" @click="showMonth" v-if="type !== 'time'">{{ dateFormatted }}</div>
     </div>
     <div class="vdatetime-popup__body">
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { DateTime } from 'luxon'
+import { DateTime, Settings } from 'luxon'
 import { createFlowManager, createFlowManagerFromType } from './util'
 import DatetimeCalendar from './DatetimeCalendar'
 import DatetimeTimePicker from './DatetimeTimePicker'
@@ -150,6 +150,12 @@ export default {
     year () {
       return this.newDatetime.year
     },
+    yearLocal () {
+      const yearString = this.newDatetime
+        .reconfigure({ outputCalendar: Settings.defaultOuputCalendar })
+        .toFormat('yyyy')
+      return parseInt(yearString)
+    },
     month () {
       return this.newDatetime.month
     },

src/DatetimeYearPicker.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="vdatetime-year-picker">
     <div class="vdatetime-year-picker__list vdatetime-year-picker__list" ref="yearList">
-      <div class="vdatetime-year-picker__item" v-for="year in years" @click="select(year)" :class="{'vdatetime-year-picker__item--selected': year.selected, 'vdatetime-year-picker__item--disabled': year.disabled}">{{ year.number }}
+      <div class="vdatetime-year-picker__item" v-for="year in years" @click="select(year)" :class="{'vdatetime-year-picker__item--selected': year.selected, 'vdatetime-year-picker__item--disabled': year.disabled}">{{ yearLocal(year.number) }}
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { DateTime } from 'luxon'
+import { DateTime, Settings } from 'luxon'
 import { yearIsDisabled, years } from './util'
 
 export default {
@@ -51,6 +51,14 @@ export default {
         const selectedYear = this.$refs.yearList.querySelector('.vdatetime-year-picker__item--selected')
         this.$refs.yearList.scrollTop = selectedYear ? selectedYear.offsetTop - 250 : 0
       }
+    },
+
+    yearLocal (year) {
+      const current = DateTime.fromFormat(year.toString(), 'yyyy')
+      const yearString = current
+        .reconfigure({ outputCalendar: Settings.defaultOuputCalendar })
+        .toFormat('yyyy')
+      return parseInt(yearString)
     }
   },