mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [calendar] show wrong weekday when set weekStart (#9824)

Browse Source 
* fix(components): [calendar] show wrong weekday when set weekStart

* fix(components): [calendar] add unit test for setWeekStart

* Update packages/components/calendar/__tests__/calendar.test.tsx

Co-authored-by: btea <2356281422@qq.com>

Co-authored-by: init-qy <953218204@qq.com>
Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
init-qy 2022-09-21 12:22:14 +08:00 committed by GitHub
parent 5be9bd2d4d
commit f7d5373ee8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/components/calendar/__tests__/calendar.test.tsx
View File

@ -1,10 +1,20 @@
import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import updateLocale from 'dayjs/plugin/updateLocale'
import dayjs from 'dayjs'
import Calendar from '../src/calendar.vue'
const AXIOM = 'Rem is the best girl'
const setDayjsWeekStart = (weekStart = 0) => {
dayjs.extend(updateLocale)
const dayjsLocale = dayjs.locale()
dayjs.updateLocale(dayjsLocale, {
weekStart,
})
}
describe('Calendar.vue', () => {
it('create', async () => {
const wrapper = mount({
@ -123,6 +133,26 @@ describe('Calendar.vue', () => {
expect(firstRow?.lastElementChild?.innerHTML).toContain('6')
})
it('firstDayOfWeek when set 1', async () => {
setDayjsWeekStart(1)
const wrapper = mount({
data: () => ({ value: new Date('2019-09-01') }),
render() {
return <Calendar v-model={this.value} />
},
})
const head = wrapper.element.querySelector('.el-calendar-table thead')
expect(head?.firstElementChild?.innerHTML).toBe('Mon')
expect(head?.lastElementChild?.innerHTML).toBe('Sun')
const firstRow = wrapper.element.querySelector('.el-calendar-table__row')
expect(firstRow?.firstElementChild?.innerHTML).toContain('26')
expect(firstRow?.lastElementChild?.innerHTML).toContain('1')
const rows = wrapper.element.querySelectorAll('.el-calendar-table__row')
expect(rows.length).toBe(6)
// reset weekStart 0
setDayjsWeekStart()
})
it('firstDayOfWeek in range mode', async () => {
const wrapper = mount({
data: () => ({ value: new Date('2019-03-04') }),
@ -130,9 +160,8 @@ describe('Calendar.vue', () => {
return (
<Calendar
v-model={this.value}
first-day-of-week={7}
range={[new Date(2019, 1, 3), new Date(2019, 2, 23)]}
></Calendar>
/>
)
},
})

6
packages/components/calendar/src/date-table.vue
View File

@ -66,8 +66,8 @@ const nsTable = useNamespace('calendar-table')
const nsDay = useNamespace('calendar-day')
const now = dayjs().locale(lang.value)
// todo better way to get Day.js locale object
const firstDayOfWeek: number = (now as any).$locale().weekStart || 0
// https://day.js.org/docs/en/i18n/locale-data
const firstDayOfWeek: number = dayjs.localeData().firstDayOfWeek()
const isInRange = computed(() => !!props.range && !!props.range.length)
@ -95,7 +95,7 @@ const rows = computed(() => {
const firstDay = props.date.startOf('month').day()
const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays(
props.date,
firstDay - firstDayOfWeek
(firstDay - firstDayOfWeek + 7) % 7
).map((day) => ({
text: day,
type: 'prev',