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(``, () => ({ 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: `
+
+
+
+ `,
+ 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 @@