mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [el-date-picker] dayjs props not extended (#3662)

Browse Source
This commit is contained in:
Aex 2021-09-26 23:38:44 +08:00 committed by GitHub
parent 50a1b6f892
commit fb8446709f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/components/date-picker/src/date-picker-com/basic-date-table.vue
View File

@ -91,9 +91,13 @@ export default defineComponent({
const lastColumn = ref(null)
const tableRows = ref([[], [], [], [], [], []])
const propsDate = computed(() => dayjs(props.date))
const propsMinDate = computed(() => dayjs(props.minDate))
const propsMaxDate = computed(() => dayjs(props.maxDate))
// todo better way to get Day.js locale object
const firstDayOfWeek = (props.date as any).$locale().weekStart || 7
const WEEKS_CONSTANT = props.date
const firstDayOfWeek = (propsDate.value as any).$locale().weekStart || 7
const WEEKS_CONSTANT = propsDate.value
.locale('en')
.localeData()
.weekdaysShort()
@ -105,7 +109,7 @@ export default defineComponent({
})
const startDate = computed(() => {
const startDayOfMonth = props.date.startOf('month')
const startDayOfMonth = propsDate.value.startOf('month')
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')
})
@ -118,7 +122,7 @@ export default defineComponent({
const rows = computed(() => {
// TODO: refactory rows / getCellClasses
const startOfMonth = props.date.startOf('month')
const startOfMonth = propsDate.value.startOf('month')
const startOfMonthDay = startOfMonth.day() || 7 // day of first day
const dateCountOfMonth = startOfMonth.daysInMonth()
const dateCountOfLastMonth = startOfMonth
@ -166,24 +170,26 @@ export default defineComponent({
const calEndDate =
props.rangeState.endDate ||
props.maxDate ||
(props.rangeState.selecting && props.minDate)
propsMaxDate.value ||
(props.rangeState.selecting && propsMinDate.value)
cell.inRange =
(props.minDate &&
calTime.isSameOrAfter(props.minDate, 'day') &&
(propsMinDate.value &&
calTime.isSameOrAfter(propsMinDate.value, 'day') &&
calEndDate &&
calTime.isSameOrBefore(calEndDate, 'day')) ||
(props.minDate &&
calTime.isSameOrBefore(props.minDate, 'day') &&
(propsMinDate.value &&
calTime.isSameOrBefore(propsMinDate.value, 'day') &&
calEndDate &&
calTime.isSameOrAfter(calEndDate, 'day'))
if (props.minDate?.isSameOrAfter(calEndDate)) {
if (propsMinDate.value?.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'day')
cell.end = props.minDate && calTime.isSame(props.minDate, 'day')
cell.end =
propsMinDate.value && calTime.isSame(propsMinDate.value, 'day')
} else {
cell.start = props.minDate && calTime.isSame(props.minDate, 'day')
cell.start =
propsMinDate.value && calTime.isSame(propsMinDate.value, 'day')
cell.end = calEndDate && calTime.isSame(calEndDate, 'day')
}
@ -245,7 +251,7 @@ export default defineComponent({
if (!date) return false
return dayjs(date)
.locale(lang.value)
.isSame(props.date.date(Number(cell.text)), 'day')
.isSame(propsDate.value.date(Number(cell.text)), 'day')
}
const getCellClasses = (cell) => {
@ -359,10 +365,10 @@ export default defineComponent({
ctx.emit('pick', { minDate: newDate, maxDate: null })
ctx.emit('select', true)
} else {
if (newDate >= props.minDate) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })
if (newDate >= propsMinDate.value) {
ctx.emit('pick', { minDate: propsMinDate.value, maxDate: newDate })
} else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })
ctx.emit('pick', { minDate: newDate, maxDate: propsMinDate.value })
}
ctx.emit('select', false)
}
@ -389,7 +395,7 @@ export default defineComponent({
const isWeekActive = (cell) => {
if (props.selectionMode !== 'week') return false
let newDate = props.date.startOf('day')
let newDate = propsDate.value.startOf('day')
if (cell.type === 'prev-month') {
newDate = newDate.subtract(1, 'month')

41
packages/components/date-picker/src/date-picker-com/basic-month-table.vue
View File

@ -69,8 +69,13 @@ export default defineComponent({
setup(props, ctx) {
const { t, lang } = useLocaleInject()
const propsDate = computed(() => dayjs(props.date))
const propsMinDate = computed(() => dayjs(props.minDate))
const propsMaxDate = computed(() => dayjs(props.maxDate))
const months = ref(
props.date
propsDate.value
.locale('en')
.localeData()
.monthsShort()
@ -102,28 +107,30 @@ export default defineComponent({
cell.type = 'normal'
const index = i * 4 + j
const calTime = props.date.startOf('year').month(index)
const calTime = propsDate.value.startOf('year').month(index)
const calEndDate =
props.rangeState.endDate ||
props.maxDate ||
(props.rangeState.selecting && props.minDate)
propsMaxDate.value ||
(props.rangeState.selecting && propsMinDate.value)
cell.inRange =
(props.minDate &&
calTime.isSameOrAfter(props.minDate, 'month') &&
(propsMinDate.value &&
calTime.isSameOrAfter(propsMinDate.value, 'month') &&
calEndDate &&
calTime.isSameOrBefore(calEndDate, 'month')) ||
(props.minDate &&
calTime.isSameOrBefore(props.minDate, 'month') &&
(propsMinDate.value &&
calTime.isSameOrBefore(propsMinDate.value, 'month') &&
calEndDate &&
calTime.isSameOrAfter(calEndDate, 'month'))
if (props.minDate?.isSameOrAfter(calEndDate)) {
if (propsMinDate.value?.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'month')
cell.end = props.minDate && calTime.isSame(props.minDate, 'month')
cell.end =
propsMinDate.value && calTime.isSame(propsMinDate.value, 'month')
} else {
cell.start = props.minDate && calTime.isSame(props.minDate, 'month')
cell.start =
propsMinDate.value && calTime.isSame(propsMinDate.value, 'month')
cell.end = calEndDate && calTime.isSame(calEndDate, 'month')
}
@ -142,7 +149,7 @@ export default defineComponent({
})
const getCellStyle = (cell) => {
const style = {} as any
const year = props.date.year()
const year = propsDate.value.year()
const today = new Date()
const month = cell.text
@ -193,7 +200,7 @@ export default defineComponent({
lastColumn.value = column
ctx.emit('changerange', {
selecting: true,
endDate: props.date.startOf('year').month(row * 4 + column),
endDate: propsDate.value.startOf('year').month(row * 4 + column),
})
}
}
@ -210,16 +217,16 @@ export default defineComponent({
const column = target.cellIndex
const row = target.parentNode.rowIndex
const month = row * 4 + column
const newDate = props.date.startOf('year').month(month)
const newDate = propsDate.value.startOf('year').month(month)
if (props.selectionMode === 'range') {
if (!props.rangeState.selecting) {
ctx.emit('pick', { minDate: newDate, maxDate: null })
ctx.emit('select', true)
} else {
if (newDate >= props.minDate) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })
if (newDate >= propsMinDate.value) {
ctx.emit('pick', { minDate: propsMinDate.value, maxDate: newDate })
} else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })
ctx.emit('pick', { minDate: newDate, maxDate: propsMinDate.value })
}
ctx.emit('select', false)
}