From 07106da33ac2f56f1f4b5fdf48195dc4750c44b8 Mon Sep 17 00:00:00 2001
From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Mon, 26 Jul 2021 10:51:32 +0800
Subject: [PATCH] fix(locale): dayjs related i18n issue (#2678)

- Fix dayjs related i18n issue.
---
 packages/calendar/src/date-table.vue          |  6 ++-
 packages/calendar/src/index.vue               | 10 ++---
 .../date-picker/__tests__/date-picker.spec.ts | 40 ++++++++++++++-----
 .../src/date-picker-com/basic-date-table.vue  |  6 +--
 .../src/date-picker-com/basic-month-table.vue | 10 ++---
 .../src/date-picker-com/basic-year-table.vue  | 16 ++++----
 .../src/date-picker-com/panel-date-pick.vue   | 24 +++++------
 .../src/date-picker-com/panel-date-range.vue  | 31 ++++++++------
 .../src/date-picker-com/panel-month-range.vue | 14 ++++---
 packages/element-plus/index.ts                |  2 +-
 packages/time-picker/src/common/picker.vue    | 22 +++++-----
 .../src/time-picker-com/panel-time-pick.vue   | 18 ++++-----
 .../src/time-picker-com/panel-time-range.vue  | 21 +++++-----
 scripts/build.sh                              |  7 ++--
 14 files changed, 134 insertions(+), 93 deletions(-)

diff --git a/packages/calendar/src/date-table.vue b/packages/calendar/src/date-table.vue
index d950e9e1c3..bba10ab235 100644
--- a/packages/calendar/src/date-table.vue
+++ b/packages/calendar/src/date-table.vue
@@ -48,6 +48,7 @@ import {
 } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 import localeData from 'dayjs/plugin/localeData'
+import { useLocaleInject } from '@element-plus/hooks'
 import { rangeArr } from '@element-plus/time-picker'
 dayjs.extend(localeData)
 
@@ -78,9 +79,10 @@ export default defineComponent({
   },
   emits: ['pick'],
   setup(props, ctx) {
-    const WEEK_DAYS = ref(dayjs().localeData().weekdaysShort())
+    const { lang } = useLocaleInject()
+    const WEEK_DAYS = ref(dayjs().locale(lang.value).localeData().weekdaysShort())
 
-    const now = dayjs()
+    const now = dayjs().locale(lang.value)
 
     // todo better way to get Day.js locale object
     const firstDayOfWeek = (now as any).$locale().weekStart || 0
diff --git a/packages/calendar/src/index.vue b/packages/calendar/src/index.vue
index 61e788e70b..65eb84c4cc 100644
--- a/packages/calendar/src/index.vue
+++ b/packages/calendar/src/index.vue
@@ -100,15 +100,15 @@ export default defineComponent({
 
   emits: ['input', 'update:modelValue'],
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
     const selectedDay = ref(null)
-    const now = dayjs()
+    const now = dayjs().locale(lang.value)
 
     const prevMonthDayjs = computed(() => {
       return date.value.subtract(1, 'month')
     })
     const curMonthDatePrefix = computed(() => {
-      return dayjs(date.value).format('YYYY-MM')
+      return dayjs(date.value).locale(lang.value).format('YYYY-MM')
     })
 
     const nextMonthDayjs = computed(() => {
@@ -143,14 +143,14 @@ export default defineComponent({
         }
         return now
       } else {
-        return dayjs(props.modelValue)
+        return dayjs(props.modelValue).locale(lang.value)
       }
     })
 
     // if range is valid, we get a two-digit array
     const validatedRange = computed(() => {
       if (!props.range) return []
-      const rangeArrDayjs = props.range.map(_ => dayjs(_))
+      const rangeArrDayjs = props.range.map(_ => dayjs(_).locale(lang.value))
       const [startDayjs, endDayjs] = rangeArrDayjs
       if (startDayjs.isAfter(endDayjs)) {
         console.warn(
diff --git a/packages/date-picker/__tests__/date-picker.spec.ts b/packages/date-picker/__tests__/date-picker.spec.ts
index 57f7fc7719..9288abd4b3 100644
--- a/packages/date-picker/__tests__/date-picker.spec.ts
+++ b/packages/date-picker/__tests__/date-picker.spec.ts
@@ -1,5 +1,8 @@
+import ConfigProvider from '@element-plus/config-provider'
 import { CommonPicker } from '@element-plus/time-picker'
 import { mount } from '@vue/test-utils'
+import zhCn from '@element-plus/locale/lang/zh-cn'
+import enUs from '@element-plus/locale/lang/en'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import { nextTick } from 'vue'
@@ -461,15 +464,32 @@ describe('WeekPicker', () => {
   })
 
   ;[
-    { locale: 'zh-cn', name: 'Monday', value: 1 },
-    { locale: 'en', name: 'Sunday', value: 0 },
+    { locale: zhCn, name: 'Monday', value: 1 },
+    { locale: enUs, name: 'Sunday', value: 0 },
   ].forEach(loObj => {
-    it(`emit first day of the week, ${loObj.locale} locale, ${loObj.name}`, async () => {
-      dayjs.locale(loObj.locale)
-      const wrapper = _mount(`<el-date-picker
-      type='week'
-      v-model="value"
-    />`, () => ({ value: '' }))
+    it(`emit first day of the week, ${loObj.locale.name} locale, ${loObj.name}`, async () => {
+      const wrapper = mount({
+        components: {
+          'el-date-picker': DatePicker,
+          'el-config-provider': ConfigProvider,
+        },
+        template: `
+          <el-config-provider :locale="locale">
+            <el-date-picker
+              type='week'
+              v-model="value"
+            />
+          </el-config-provider>
+        `,
+        data() {
+          return {
+            locale: loObj.locale,
+            value: '',
+          }
+        },
+      }, {
+        attachTo: 'body',
+      })
       const input = wrapper.find('input')
       input.trigger('blur')
       input.trigger('focus')
@@ -479,8 +499,8 @@ describe('WeekPicker', () => {
       await nextTick()
       const vm = wrapper.vm as any
       expect(vm.value).not.toBeNull()
-      expect(+dayjs(vm.value)).toBe(+dayjs(vm.value).startOf('week'))
-      expect(dayjs(vm.value).day()).toBe(loObj.value) // Sunday or Monday
+      expect(+dayjs(vm.value).locale(loObj.locale.name)).toBe(+dayjs(vm.value).locale(loObj.locale.name).startOf('week'))
+      expect(dayjs(vm.value).locale(loObj.locale.name).day()).toBe(loObj.value) // Sunday or Monday
     })
   })
 })
diff --git a/packages/date-picker/src/date-picker-com/basic-date-table.vue b/packages/date-picker/src/date-picker-com/basic-date-table.vue
index 9ead446ffe..22a0f2ad0d 100644
--- a/packages/date-picker/src/date-picker-com/basic-date-table.vue
+++ b/packages/date-picker/src/date-picker-com/basic-date-table.vue
@@ -89,7 +89,7 @@ export default defineComponent({
   emits: ['changerange', 'pick', 'select'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
     // data
     const lastRow = ref(null)
     const lastColumn = ref(null)
@@ -126,7 +126,7 @@ export default defineComponent({
 
       const selectedDate: Dayjs[] = props.selectionMode === 'dates' ? coerceTruthyValueToArray(props.parsedValue) : []
 
-      const calNow = dayjs().startOf('day')
+      const calNow = dayjs().locale(lang.value).startOf('day')
 
       for (let i = 0; i < 6; i++) {
         const row = rows_[i]
@@ -225,7 +225,7 @@ export default defineComponent({
 
     const cellMatchesDate = (cell, date) => {
       if (!date) return false
-      return dayjs(date)
+      return dayjs(date).locale(lang.value)
         .isSame(
           props.date.date(Number(cell.text))
           , 'day',
diff --git a/packages/date-picker/src/date-picker-com/basic-month-table.vue b/packages/date-picker/src/date-picker-com/basic-month-table.vue
index 34fd58c15b..e92b4041c1 100644
--- a/packages/date-picker/src/date-picker-com/basic-month-table.vue
+++ b/packages/date-picker/src/date-picker-com/basic-month-table.vue
@@ -26,8 +26,8 @@ import {
   PropType,
 } from 'vue'
 
-const datesInMonth = (year, month) => {
-  const firstDay = dayjs().startOf('month').month(month).year(year)
+const datesInMonth = (year, month, lang: string) => {
+  const firstDay = dayjs().locale(lang).startOf('month').month(month).year(year)
   const numOfDays = firstDay.daysInMonth()
   return rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate())
 }
@@ -66,7 +66,7 @@ export default defineComponent({
   emits: ['changerange', 'pick', 'select'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
     const months = ref(props.date.locale('en').localeData().monthsShort().map(_=>_.toLowerCase()))
     const tableRows = ref([ [], [], [] ])
     const lastRow = ref(null)
@@ -74,7 +74,7 @@ export default defineComponent({
     const rows = computed(() => {
       // TODO: refactory rows / getCellClasses
       const rows = tableRows.value
-      const now = dayjs().startOf('month')
+      const now = dayjs().locale(lang.value).startOf('month')
 
       for (let i = 0; i < 3; i++) {
         const row = rows[i]
@@ -141,7 +141,7 @@ export default defineComponent({
       const month = cell.text
 
       style.disabled = props.disabledDate
-        ? datesInMonth(year, month).every(props.disabledDate)
+        ? datesInMonth(year, month, lang.value).every(props.disabledDate)
         : false
       style.current = coerceTruthyValueToArray(props.parsedValue).findIndex(date => date.year() === year && date.month() === month) >= 0
       style.today = today.getFullYear() === year && today.getMonth() === month
diff --git a/packages/date-picker/src/date-picker-com/basic-year-table.vue b/packages/date-picker/src/date-picker-com/basic-year-table.vue
index 95c26e39f3..e4e1d47164 100644
--- a/packages/date-picker/src/date-picker-com/basic-year-table.vue
+++ b/packages/date-picker/src/date-picker-com/basic-year-table.vue
@@ -44,6 +44,7 @@
 </template>
 
 <script lang="ts">
+import { useLocaleInject } from '@element-plus/hooks'
 import { hasClass } from '@element-plus/utils/dom'
 import { rangeArr } from '@element-plus/time-picker'
 import { coerceTruthyValueToArray } from '@element-plus/utils/util'
@@ -54,8 +55,8 @@ import {
 } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 
-const datesInYear = year => {
-  const firstDay = dayjs(String(year)).startOf('year')
+const datesInYear = (year, lang: string) => {
+  const firstDay = dayjs(String(year)).locale(lang).startOf('year')
   const lastDay = firstDay.endOf('year')
   const numOfDays = lastDay.dayOfYear()
   return rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate())
@@ -77,15 +78,16 @@ export default defineComponent({
   emits: ['pick'],
 
   setup(props, ctx) {
+    const { lang } = useLocaleInject()
     const startYear = computed(() => {
       return Math.floor(props.date.year() / 10) * 10
     })
     const getCellStyle = year => {
       const style = {} as any
-      const today = dayjs()
+      const today = dayjs().locale(lang.value)
 
       style.disabled = props.disabledDate
-        ? datesInYear(year).every(props.disabledDate)
+        ? datesInYear(year, lang.value).every(props.disabledDate)
         : false
 
       style.current = coerceTruthyValueToArray(props.parsedValue).findIndex(_ => _.year() === year) >= 0
@@ -95,10 +97,10 @@ export default defineComponent({
       return style
     }
 
-    const handleYearTableClick = event => {
-      const target = event.target
+    const handleYearTableClick = (event: MouseEvent) => {
+      const target = event.target as HTMLDivElement
       if (target.tagName === 'A') {
-        if (hasClass(target.parentNode, 'disabled')) return
+        if (hasClass((target as any).parentNode, 'disabled')) return
         const year = target.textContent || target.innerText
         ctx.emit('pick', Number(year))
       }
diff --git a/packages/date-picker/src/date-picker-com/panel-date-pick.vue b/packages/date-picker/src/date-picker-com/panel-date-pick.vue
index 2e9e0b889b..77aa7edab3 100644
--- a/packages/date-picker/src/date-picker-com/panel-date-pick.vue
+++ b/packages/date-picker/src/date-picker-com/panel-date-pick.vue
@@ -195,9 +195,9 @@ export default defineComponent({
   },
   emits: ['pick', 'set-picker-option'],
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
 
-    const innerDate = ref(dayjs())
+    const innerDate = ref(dayjs().locale(lang.value))
 
     const month = computed(() => {
       return innerDate.value.month()
@@ -218,7 +218,7 @@ export default defineComponent({
     }
     const formatEmit = (emitDayjs: Dayjs) => {
       if (defaultTime) {
-        const defaultTimeD = dayjs(defaultTime)
+        const defaultTimeD = dayjs(defaultTime).locale(lang.value)
         return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date())
       }
       if (showTime.value) return emitDayjs.millisecond(0)
@@ -292,7 +292,7 @@ export default defineComponent({
     const handleShortcutClick = shortcut => {
       const shortcutValue = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
       if (shortcutValue) {
-        emit(dayjs(shortcutValue))
+        emit(dayjs(shortcutValue).locale(lang.value))
         return
       }
       if (shortcut.onClick) {
@@ -358,7 +358,7 @@ export default defineComponent({
         // deal with the scenario where: user opens the date time picker, then confirm without doing anything
         let result = props.parsedValue as Dayjs
         if (!result) {
-          const defaultTimeD = dayjs(defaultTime)
+          const defaultTimeD = dayjs(defaultTime).locale(lang.value)
           const defaultValueD = getDefaultValue()
           result = defaultTimeD.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date())
         }
@@ -371,10 +371,10 @@ export default defineComponent({
     const changeToNow = () => {
       // NOTE: not a permanent solution
       //       consider disable "now" button in the future
-      const now = dayjs()
+      const now = dayjs().locale(lang.value)
       const nowDate = now.toDate()
       if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
-        innerDate.value = dayjs()
+        innerDate.value = dayjs().locale(lang.value)
         emit(innerDate.value)
       }
     }
@@ -417,7 +417,7 @@ export default defineComponent({
     }
 
     const handleVisibleTimeChange = value => {
-      const newDate = dayjs(value, timeFormat.value)
+      const newDate = dayjs(value, timeFormat.value).locale(lang.value)
       if (newDate.isValid() && checkDateWithinRange(newDate)) {
         innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date())
         userInputTime.value = null
@@ -427,7 +427,7 @@ export default defineComponent({
     }
 
     const handleVisibleDateChange = value => {
-      const newDate = dayjs(value, dateFormat.value)
+      const newDate = dayjs(value, dateFormat.value).locale(lang.value)
       if (newDate.isValid()) {
         if (disabledDate && disabledDate(newDate.toDate())) {
           return
@@ -454,11 +454,11 @@ export default defineComponent({
     }
 
     const parseUserInput = value => {
-      return dayjs(value, props.format)
+      return dayjs(value, props.format).locale(lang.value)
     }
 
     const getDefaultValue = () => {
-      return dayjs(defaultValue)
+      return dayjs(defaultValue).locale(lang.value)
     }
 
     const handleKeydown = event => {
@@ -502,7 +502,7 @@ export default defineComponent({
         if (disabledDate && disabledDate(newDate)) {
           continue
         }
-        const result = dayjs(newDate)
+        const result = dayjs(newDate).locale(lang.value)
         innerDate.value = result
         ctx.emit('pick', result, true)
         break
diff --git a/packages/date-picker/src/date-picker-com/panel-date-range.vue b/packages/date-picker/src/date-picker-com/panel-date-range.vue
index 2360fc7caf..844dcebb0e 100644
--- a/packages/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/date-picker/src/date-picker-com/panel-date-range.vue
@@ -236,9 +236,9 @@ export default defineComponent({
   emits: ['pick', 'set-picker-option'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
-    const leftDate = ref(dayjs())
-    const rightDate = ref(dayjs().add(1, 'month'))
+    const { t, lang } = useLocaleInject()
+    const leftDate = ref(dayjs().locale(lang.value))
+    const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))
     const minDate = ref(null)
     const maxDate = ref(null)
     const dateUserInput = ref({
@@ -404,7 +404,7 @@ export default defineComponent({
     const formatEmit = (emitDayjs: Dayjs, index?) => {
       if (!emitDayjs) return
       if (defaultTime) {
-        const defaultTimeD = dayjs(defaultTime[index] || defaultTime)
+        const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(lang.value)
         return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date())
       }
       return emitDayjs
@@ -427,7 +427,10 @@ export default defineComponent({
     const handleShortcutClick = shortcut => {
       const shortcutValues = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
       if (shortcutValues) {
-        ctx.emit('pick', [dayjs(shortcutValues[0]), dayjs(shortcutValues[1])])
+        ctx.emit('pick', [
+          dayjs(shortcutValues[0]).locale(lang.value),
+          dayjs(shortcutValues[1]).locale(lang.value),
+        ])
         return
       }
       if (shortcut.onClick) {
@@ -448,7 +451,7 @@ export default defineComponent({
 
     const handleDateInput = (value, type) => {
       dateUserInput.value[type] = value
-      const parsedValueD = dayjs(value, dateFormat.value)
+      const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)
 
       if (parsedValueD.isValid()) {
         if (disabledDate &&
@@ -473,13 +476,13 @@ export default defineComponent({
       }
     }
 
-    const handleDateChange = (value, type) => {
+    const handleDateChange = (_, type) => {
       dateUserInput.value[type] = null
     }
 
     const handleTimeInput = (value, type) => {
       timeUserInput.value[type] = value
-      const parsedValueD = dayjs(value, timeFormat.value)
+      const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)
 
       if (parsedValueD.isValid()) {
         if (type === 'min') {
@@ -549,16 +552,18 @@ export default defineComponent({
       ctx.emit('pick', null)
     }
 
-    const formatToString = value => {
+    const formatToString = (value: Dayjs | Dayjs[]) => {
       return Array.isArray(value) ? value.map(_ => _.format(format)) : value.format(format)
     }
 
-    const parseUserInput = value => {
-      return Array.isArray(value) ? value.map(_ => dayjs(_, format)) : dayjs(value, format)
+    const parseUserInput = (value: Dayjs | Dayjs[]) => {
+      return Array.isArray(value)
+        ? value.map(_ => dayjs(_, format).locale(lang.value))
+        : dayjs(value, format).locale(lang.value)
     }
 
     const getDefaultValue = () => {
-      let start
+      let start: Dayjs
       if (Array.isArray(defaultValue)) {
         const left = dayjs(defaultValue[0])
         let right = dayjs(defaultValue[1])
@@ -571,6 +576,8 @@ export default defineComponent({
       } else {
         start = dayjs()
       }
+
+      start = start.locale(lang.value)
       return [start, start.add(1, 'month')]
     }
 
diff --git a/packages/date-picker/src/date-picker-com/panel-month-range.vue b/packages/date-picker/src/date-picker-com/panel-month-range.vue
index 1ccc814015..2689ecc636 100644
--- a/packages/date-picker/src/date-picker-com/panel-month-range.vue
+++ b/packages/date-picker/src/date-picker-com/panel-month-range.vue
@@ -109,16 +109,19 @@ export default defineComponent({
   emits: ['pick', 'set-picker-option'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
-    const leftDate = ref(dayjs())
-    const rightDate = ref(dayjs().add(1, 'year'))
+    const { t, lang } = useLocaleInject()
+    const leftDate = ref(dayjs().locale(lang.value))
+    const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))
 
     const hasShortcuts = computed(() => !!shortcuts.length)
 
     const handleShortcutClick = shortcut => {
       const shortcutValues = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value
       if (shortcutValues) {
-        ctx.emit('pick', [dayjs(shortcutValues[0]), dayjs(shortcutValues[1])])
+        ctx.emit('pick', [
+          dayjs(shortcutValues[0]).locale(lang.value),
+          dayjs(shortcutValues[1]).locale(lang.value),
+        ])
         return
       }
       if (shortcut.onClick) {
@@ -220,7 +223,7 @@ export default defineComponent({
     }
 
     const getDefaultValue = () => {
-      let start
+      let start: Dayjs
       if (Array.isArray(defaultValue)) {
         const left = dayjs(defaultValue[0])
         let right = dayjs(defaultValue[1])
@@ -233,6 +236,7 @@ export default defineComponent({
       } else {
         start = dayjs()
       }
+      start = start.locale(lang.value)
       return [start, start.add(1, 'year')]
     }
 
diff --git a/packages/element-plus/index.ts b/packages/element-plus/index.ts
index 6cb27078fd..22ae1f475d 100644
--- a/packages/element-plus/index.ts
+++ b/packages/element-plus/index.ts
@@ -1,5 +1,5 @@
 
-import { setLocale, i18n } from '@element-plus/locale'
+import { setLocale } from '@element-plus/locale'
 import { setConfig } from '@element-plus/utils/config'
 import isServer from '@element-plus/utils/isServer'
 // if you encountered problems alike "Can't resolve './version'"
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index aeb237547d..eade1ed8a9 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -133,6 +133,7 @@ import {
 } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 import isEqual from 'lodash/isEqual'
+import { useLocaleInject } from '@element-plus/hooks'
 import { ClickOutside } from '@element-plus/directives'
 import ElInput from '@element-plus/input'
 import ElPopper from '@element-plus/popper'
@@ -182,13 +183,15 @@ const valueEquals = function(a, b) {
   return false
 }
 
-const parser = function(date: Date | string, format: string): Dayjs {
-  const day = isEmpty(format) ? dayjs(date) : dayjs(date, format)
+const parser = function(date: Date | string, format: string, lang: string): Dayjs {
+  const day = isEmpty(format)
+    ? dayjs(date).locale(lang)
+    : dayjs(date, format).locale(lang)
   return day.isValid() ? day : undefined
 }
 
-const formatter = function(date: Date, format: string) {
-  return isEmpty(format) ? date : dayjs(date).format(format)
+const formatter = function(date: Date, format: string, lang: string) {
+  return isEmpty(format) ? date : dayjs(date).locale(lang).format(format)
 }
 
 export default defineComponent({
@@ -202,6 +205,7 @@ export default defineComponent({
   emits: ['update:modelValue', 'change', 'focus', 'blur'],
   setup(props, ctx) {
     const ELEMENT = useGlobalConfig()
+    const { lang } = useLocaleInject()
 
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
@@ -236,11 +240,11 @@ export default defineComponent({
       if (!valueEquals(props.modelValue, val)) {
         let formatValue
         if (Array.isArray(val)) {
-          formatValue = val.map(_ => formatter(_, props.valueFormat))
+          formatValue = val.map(_ => formatter(_, props.valueFormat, lang.value))
         } else if(val) {
-          formatValue = formatter(val, props.valueFormat)
+          formatValue = formatter(val, props.valueFormat, lang.value)
         }
-        ctx.emit('update:modelValue', val ? formatValue : val)
+        ctx.emit('update:modelValue', val ? formatValue : val, lang.value)
       }
     }
     const refInput = computed(() => {
@@ -296,9 +300,9 @@ export default defineComponent({
         }
       } else {
         if (Array.isArray(props.modelValue)) {
-          result = props.modelValue.map(_=> parser(_, props.valueFormat))
+          result = props.modelValue.map(_=> parser(_, props.valueFormat, lang.value))
         } else {
-          result = parser(props.modelValue, props.valueFormat)
+          result = parser(props.modelValue, props.valueFormat, lang.value)
         }
       }
 
diff --git a/packages/time-picker/src/time-picker-com/panel-time-pick.vue b/packages/time-picker/src/time-picker-com/panel-time-pick.vue
index 51325446dd..9669e464c6 100644
--- a/packages/time-picker/src/time-picker-com/panel-time-pick.vue
+++ b/packages/time-picker/src/time-picker-com/panel-time-pick.vue
@@ -77,7 +77,7 @@ export default defineComponent({
   emits: ['pick', 'select-range', 'set-picker-option'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
     // data
     const selectionRange = ref([0, 2])
     const oldValue = useOldValue(props)
@@ -94,8 +94,8 @@ export default defineComponent({
       return ''
     })
     // method
-    const isValidValue = _date => {
-      const parsedDate = dayjs(_date)
+    const isValidValue = (_date: Dayjs) => {
+      const parsedDate = dayjs(_date).locale(lang.value)
       const result = getRangeAvailableTime(parsedDate)
       return parsedDate.isSame(result)
     }
@@ -118,7 +118,7 @@ export default defineComponent({
       selectionRange.value = [start, end]
     }
 
-    const changeSelectionRange = step => {
+    const changeSelectionRange = (step: number) => {
       const list = [0, 3].concat(showSeconds.value ? [6] : [])
       const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])
       const index = list.indexOf(selectionRange.value[0])
@@ -126,7 +126,7 @@ export default defineComponent({
       timePickerOptions['start_emitSelectRange'](mapping[next])
     }
 
-    const handleKeydown = event => {
+    const handleKeydown = (event: KeyboardEvent) => {
       const code = event.code
 
       if (code === EVENT_CODE.left || code === EVENT_CODE.right) {
@@ -170,18 +170,18 @@ export default defineComponent({
       return result
     }
 
-    const parseUserInput = value => {
+    const parseUserInput = (value: Dayjs) => {
       if (!value) return null
-      return dayjs(value, props.format)
+      return dayjs(value, props.format).locale(lang.value)
     }
 
-    const formatToString = value => {
+    const formatToString = (value: Dayjs) => {
       if (!value) return null
       return value.format(props.format)
     }
 
     const getDefaultValue = () => {
-      return dayjs(defaultValue)
+      return dayjs(defaultValue).locale(lang.value)
     }
 
     ctx.emit('set-picker-option', ['isValidValue', isValidValue])
diff --git a/packages/time-picker/src/time-picker-com/panel-time-range.vue b/packages/time-picker/src/time-picker-com/panel-time-range.vue
index a17abd5ce9..3a3de921b0 100644
--- a/packages/time-picker/src/time-picker-com/panel-time-range.vue
+++ b/packages/time-picker/src/time-picker-com/panel-time-range.vue
@@ -107,7 +107,7 @@ export default defineComponent({
   emits: ['pick', 'select-range', 'set-picker-option'],
 
   setup(props, ctx) {
-    const { t } = useLocaleInject()
+    const { t, lang } = useLocaleInject()
     const minDate = computed(() => props.parsedValue[0])
     const maxDate = computed(() => props.parsedValue[1])
     const oldValue = useOldValue(props)
@@ -137,8 +137,8 @@ export default defineComponent({
       handleChange(minDate.value, date.millisecond(0))
     }
 
-    const isValidValue = _date => {
-      const parsedDate = _date.map(_=> dayjs(_))
+    const isValidValue = (_date: Dayjs[]) => {
+      const parsedDate = _date.map(_=> dayjs(_).locale(lang.value))
       const result = getRangeAvailableTime(parsedDate)
       return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])
     }
@@ -268,15 +268,15 @@ export default defineComponent({
       return result
     }
 
-    const parseUserInput = value => {
+    const parseUserInput = (value: Dayjs[] | Dayjs) => {
       if (!value) return null
       if (Array.isArray(value)) {
-        return value.map(_=> dayjs(_, props.format))
+        return value.map(_=> dayjs(_, props.format).locale(lang.value))
       }
-      return dayjs(value, props.format)
+      return dayjs(value, props.format).locale(lang.value)
     }
 
-    const formatToString = value => {
+    const formatToString = (value: Dayjs[] | Dayjs) => {
       if (!value) return null
       if (Array.isArray(value)) {
         return value.map(_=> _.format(props.format))
@@ -286,11 +286,12 @@ export default defineComponent({
 
     const getDefaultValue = () => {
       if (Array.isArray(defaultValue)) {
-        return defaultValue.map(_=> dayjs(_))
+        return defaultValue.map(_=> dayjs(_).locale(lang.value))
       }
+      const defaultDay = dayjs(defaultValue).locale(lang.value)
       return [
-        dayjs(defaultValue),
-        dayjs(defaultValue).add(60,'m'),
+        defaultDay,
+        defaultDay.add(60,'m'),
       ]
     }
 
diff --git a/scripts/build.sh b/scripts/build.sh
index b54498b442..a274c8fa42 100644
--- a/scripts/build.sh
+++ b/scripts/build.sh
@@ -28,9 +28,10 @@ yarn build:theme
 
 yarn build:helper
 
+echo "Copying types"
 # Post build cp type definitions
 touch temp
-find dist -type d ! -name 'element-plus' -depth 1 -print0 | xargs -0 -I {} sh -c "basename {}" > temp
+find ./dist -type d ! -name 'element-plus' -depth 1 -print0 | xargs -0 -I {} sh -c "basename {}" > temp
 
 input="./temp"
 
@@ -54,7 +55,7 @@ cp dist/element-plus/* lib
 cp packages/utils/types.ts lib/utils/
 cp dist/element-plus/* es
 
-
-# Post build cleanup 
+echo "Remove temp files"
+# Post build cleanup
 rm -rf temp
 rm -rf tempDir