Merge pull request #610 from kaizumaki/feature/modify-dayjs

日付をローカライズ・date-fnsをdayjsに置き換え

Author: NEKOYASAN

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

nuxt-i18n.config.js

@@ -15,16 +15,19 @@ const options = {
       code: 'ja',
       displayName: '日本語',
       file: 'ja.json',
+      format: 'ja',
     },
     {
       code: 'en',
       displayName: 'English',
       file: 'en.json',
+      format: 'en',
     },
     {
       code: 'zh-goyu',
       displayName: '台灣華語',
       file: 'zh_TW.json',
+      format: 'zh-tw',
     },
   ],
 }

nuxt.config.js

@@ -124,7 +124,14 @@ export default {
     'nuxt-svg-loader',
     ['nuxt-i18n', i18nConfig],
     ['@nuxtjs/google-analytics', { id: process.env.GAID }],
+    '@nuxtjs/dayjs',
   ],
+  dayjs: {
+    locales: ['ja', 'en', 'zh-tw'],
+    defaultLocale: 'ja',
+    defaultTimeZone: 'Asia/Tokyo',
+    plugins: ['utc', 'timezone', 'minMax', 'isToday', 'localizedFormat'],
+  },
   /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options

package.json

@@ -10,7 +10,8 @@
     "test:unit": "jest --config jest.config.js",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue,.ts --ignore-path .eslintignore ."
+    "lint": "eslint --ext .js,.vue,.ts --ignore-path .eslintignore .",
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,ts,css,vue}": [
@@ -28,6 +29,7 @@
     "@babel/core": "^7.14.3",
     "@babel/runtime-corejs3": "^7.14.0",
     "@nuxtjs/axios": "^5.13.4",
+    "@nuxtjs/dayjs": "^1.4.0",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.5",
@@ -36,8 +38,6 @@
     "aws-amplify": "^4.0.2",
     "core-js": "^3.12.1",
     "cross-env": "^7.0.3",
-    "date-fns": "^2.21.3",
-    "dayjs": "^1.10.4",
     "express": "^4.17.1",
     "nuxt": "^2.15.6",
     "nuxt-i18n": "^6.27.0",

src/components/AppLanguageSelector.vue

@@ -15,24 +15,29 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type LocaleListItem = { text: string; value: string }
+type LocaleListItem = { text: string; value: string; format: string }
 type LocalData = {
   locales: LocaleListItem[]
 }
 
 export default Vue.extend({
   data(): LocalData {
     if (!this.$root.$i18n.locales)
-      return { locales: [{ text: 'N/A', value: '' }] }
+      return { locales: [{ text: 'N/A', value: '', format: '' }] }
 
     return {
       // @ts-ignore
       locales: this.$root.$i18n.locales.map((l) => {
-        if (typeof l === 'string') return { text: l, value: l }
-        else return { text: l.displayName, value: l.code }
+        if (typeof l === 'string') return { text: l, value: l, format: l }
+        else return { text: l.displayName, value: l.code, format: l.format }
       }),
     }
   },
+  watch: {
+    '$root.$i18n.locale'(locale) {
+      this.$dayjs.locale(this.locales?.find((v) => v.value === locale)?.format)
+    },
+  },
 })
 </script>
 

src/components/BaseInputField.vue

@@ -15,7 +15,9 @@
     @input="$emit('input', $event)"
   >
     <template #prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
     <template #append>
       <v-icon
@@ -41,7 +43,9 @@
     @input="$emit('input', $event)"
   >
     <template #prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
   <v-text-field
@@ -60,7 +64,9 @@
     @input="$emit('input', $event)"
   >
     <template #prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
   <v-text-field
@@ -79,7 +85,9 @@
     @input="$emit('input', $event)"
   >
     <template #prepend-inner>
-      <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
+      <v-icon :color="prependIconColor">
+        {{ prependIcon }}
+      </v-icon>
     </template>
   </v-text-field>
 </template>

src/components/CalendarBar.vue

@@ -18,10 +18,10 @@
       <v-col cols="1" class="pa-0 ma-1">
         <v-card class="calendar-bar-ym" flat>
           <v-card-title class="calendar-bar-ym-title">
-            {{ currentMonthString }}
+            {{ currentMonthString() }}
           </v-card-title>
           <v-card-subtitle class="calendar-bar-ym-subtitle">
-            {{ currentYearString }}
+            {{ currentYearString() }}
           </v-card-subtitle>
         </v-card>
       </v-col>
@@ -56,11 +56,7 @@
 
 <script lang="ts">
 import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator'
-import add from 'date-fns/add'
-import format from 'date-fns/format'
-import formatISO from 'date-fns/formatISO'
-import isValid from 'date-fns/isValid'
-import ja from 'date-fns/locale/ja'
+import dayjs from 'dayjs'
 
 export type View = 'Day' | 'Weekday' | 'Week'
 export type StartWeekOn =
@@ -106,7 +102,7 @@ class DateListWindowImpl implements DateListWindow {
     this.startWeekOn = view === 'Weekday' ? 'Monday' : startWeekOn
     this.currentDate = this.calcCurrentDate(
       view,
-      isValid(date) ? date : new Date()
+      dayjs(date).isValid() ? date : new Date()
     )
     this.list = this.generateDateList(
       this.view,
@@ -143,7 +139,7 @@ class DateListWindowImpl implements DateListWindow {
   selectDate(date: Date): DateListWindow {
     this.currentDate = this.calcCurrentDate(
       this.view,
-      isValid(date) ? date : new Date()
+      dayjs(date).isValid() ? date : new Date()
     )
     this.list = this.generateDateList()
 
@@ -155,13 +151,13 @@ class DateListWindowImpl implements DateListWindow {
   private calcCurrentDate(view: View, date: Date): Date {
     let currentDate: Date = date
     if (view === 'Weekday' && date.getDay() === 0) {
-      currentDate = add(date, { days: 1 })
+      currentDate = dayjs(date).add(1, 'd').toDate()
     }
     return currentDate
   }
 
   private addDays(value: number): DateListWindow {
-    return this.selectDate(add(this.currentDate, { days: value }))
+    return this.selectDate(dayjs(this.currentDate).add(value, 'd').toDate())
   }
 
   private firstDateOfList: (
@@ -187,7 +183,9 @@ class DateListWindowImpl implements DateListWindow {
       default: {
         const idx = dowList.indexOf(startWeekOn)
         const startDay: number = idx >= 0 ? idx : 1
-        firstDate = add(date, { days: (startDay - (7 + date.getDay())) % 7 })
+        firstDate = dayjs(date)
+          .add((startDay - (7 + date.getDay())) % 7, 'd')
+          .toDate()
         break
       }
     }
@@ -207,7 +205,7 @@ class DateListWindowImpl implements DateListWindow {
     const size: number = this.sizeOfList(view)
     const list = Array<Date>(size)
     for (let i = 0; i < list.length; i++) {
-      list[i] = add(firstDate, { days: i })
+      list[i] = dayjs(firstDate).add(i, 'd').toDate()
     }
     return list
   }
@@ -256,32 +254,28 @@ export default class CalendarBar extends Vue {
     this.dateListWindow.selectDate(newValue)
   }
 
-  get currentMonthString(): string {
-    return format(this.dateListWindow.currentDate, 'M') + '月'
+  currentMonthString(): string {
+    return this.$dayjs(this.dateListWindow.currentDate).format('MMM')
   }
 
-  get currentYearString(): string {
-    return format(this.dateListWindow.currentDate, 'yyyy')
+  currentYearString(): string {
+    return this.$dayjs(this.dateListWindow.currentDate).format('YYYY')
   }
 
   fmtd(date: Date): String {
-    return format(date, 'd')
+    return this.$dayjs(date).format('D')
   }
 
   fmteeeee(date: Date): String {
-    return format(date, 'EEEEE', { locale: ja })
+    return this.$dayjs(date).format('ddd')
   }
 
   fmtft(date: Date): String {
-    return format(date, 'yyyy-MM-dd HH:mm:ss EEE')
+    return this.$dayjs(date).format('YYYY-MM-DD HH:mm:ss ddd')
   }
 
   fmtym(date: Date): String {
-    return format(date, 'yyyy年M月', { locale: ja })
-  }
-
-  fmtISO(date: Date): String {
-    return formatISO(date)
+    return this.$dayjs(date).format('YYYY MMM')
   }
 }
 </script>

src/components/EditLessonScreen.vue

@@ -52,7 +52,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import dayjs from 'dayjs'
 import { vxm } from '@/store'
 import BaseActionButton from '@/components/BaseActionButton.vue'
 import EditLessonScreenInner1 from '@/components/EditLessonScreenInner1.vue'
@@ -255,10 +254,10 @@ export default Vue.extend({
     buildLessonData(): classData.Lesson {
       const startTimeStr: string =
         this.lessonData.date + ' ' + this.lessonData.startTime
-      const startTimeDate: Date = dayjs(startTimeStr).toDate()
+      const startTimeDate: Date = this.$dayjs(startTimeStr).toDate()
       const endTimeStr: string =
         this.lessonData.date + ' ' + this.lessonData.endTime
-      const endTimeDate: Date = dayjs(endTimeStr).toDate()
+      const endTimeDate: Date = this.$dayjs(endTimeStr).toDate()
       const videoData = []
       if (this.lessonData.videoUrl)
         videoData.push({

src/components/EditLessonScreenInner1.vue

@@ -6,7 +6,11 @@
       :return-value.sync="tempFormData.date"
       width="290px"
     >
-      <v-date-picker v-model="tempFormData.date">
+      <v-date-picker
+        v-model="tempFormData.date"
+        :locale="$root.$i18n.locale"
+        :day-format="(date) => $dayjs(date).format('D')"
+      >
         <v-spacer />
         <v-btn text color="primary" @click="datePickerOpen = false">
           {{ $t('common.general.buttons.cancel') }}