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 lastColumn = ref(null)
const tableRows = ref([[], [], [], [], [], []]) 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 // todo better way to get Day.js locale object
const firstDayOfWeek = (props.date as any).$locale().weekStart || 7 const firstDayOfWeek = (propsDate.value as any).$locale().weekStart || 7
const WEEKS_CONSTANT = props.date const WEEKS_CONSTANT = propsDate.value
.locale('en') .locale('en')
.localeData() .localeData()
.weekdaysShort() .weekdaysShort()
@ -105,7 +109,7 @@ export default defineComponent({
}) })
const startDate = computed(() => { const startDate = computed(() => {
const startDayOfMonth = props.date.startOf('month') const startDayOfMonth = propsDate.value.startOf('month')
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day') return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')
}) })
@ -118,7 +122,7 @@ export default defineComponent({
const rows = computed(() => { const rows = computed(() => {
// TODO: refactory rows / getCellClasses // 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 startOfMonthDay = startOfMonth.day() || 7 // day of first day
const dateCountOfMonth = startOfMonth.daysInMonth() const dateCountOfMonth = startOfMonth.daysInMonth()
const dateCountOfLastMonth = startOfMonth const dateCountOfLastMonth = startOfMonth
@ -166,24 +170,26 @@ export default defineComponent({
const calEndDate = const calEndDate =
props.rangeState.endDate || props.rangeState.endDate ||
props.maxDate || propsMaxDate.value ||
(props.rangeState.selecting && props.minDate) (props.rangeState.selecting && propsMinDate.value)
cell.inRange = cell.inRange =
(props.minDate && (propsMinDate.value &&
calTime.isSameOrAfter(props.minDate, 'day') && calTime.isSameOrAfter(propsMinDate.value, 'day') &&
calEndDate && calEndDate &&
calTime.isSameOrBefore(calEndDate, 'day')) || calTime.isSameOrBefore(calEndDate, 'day')) ||
(props.minDate && (propsMinDate.value &&
calTime.isSameOrBefore(props.minDate, 'day') && calTime.isSameOrBefore(propsMinDate.value, 'day') &&
calEndDate && calEndDate &&
calTime.isSameOrAfter(calEndDate, 'day')) calTime.isSameOrAfter(calEndDate, 'day'))
if (props.minDate?.isSameOrAfter(calEndDate)) { if (propsMinDate.value?.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'day') 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 { } 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') cell.end = calEndDate && calTime.isSame(calEndDate, 'day')
} }
@ -245,7 +251,7 @@ export default defineComponent({
if (!date) return false if (!date) return false
return dayjs(date) return dayjs(date)
.locale(lang.value) .locale(lang.value)
.isSame(props.date.date(Number(cell.text)), 'day') .isSame(propsDate.value.date(Number(cell.text)), 'day')
} }
const getCellClasses = (cell) => { const getCellClasses = (cell) => {
@ -359,10 +365,10 @@ export default defineComponent({
ctx.emit('pick', { minDate: newDate, maxDate: null }) ctx.emit('pick', { minDate: newDate, maxDate: null })
ctx.emit('select', true) ctx.emit('select', true)
} else { } else {
if (newDate >= props.minDate) { if (newDate >= propsMinDate.value) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate }) ctx.emit('pick', { minDate: propsMinDate.value, maxDate: newDate })
} else { } else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate }) ctx.emit('pick', { minDate: newDate, maxDate: propsMinDate.value })
} }
ctx.emit('select', false) ctx.emit('select', false)
} }
@ -389,7 +395,7 @@ export default defineComponent({
const isWeekActive = (cell) => { const isWeekActive = (cell) => {
if (props.selectionMode !== 'week') return false if (props.selectionMode !== 'week') return false
let newDate = props.date.startOf('day') let newDate = propsDate.value.startOf('day')
if (cell.type === 'prev-month') { if (cell.type === 'prev-month') {
newDate = newDate.subtract(1, '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) { setup(props, ctx) {
const { t, lang } = useLocaleInject() 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( const months = ref(
props.date propsDate.value
.locale('en') .locale('en')
.localeData() .localeData()
.monthsShort() .monthsShort()
@ -102,28 +107,30 @@ export default defineComponent({
cell.type = 'normal' cell.type = 'normal'
const index = i * 4 + j const index = i * 4 + j
const calTime = props.date.startOf('year').month(index) const calTime = propsDate.value.startOf('year').month(index)
const calEndDate = const calEndDate =
props.rangeState.endDate || props.rangeState.endDate ||
props.maxDate || propsMaxDate.value ||
(props.rangeState.selecting && props.minDate) (props.rangeState.selecting && propsMinDate.value)
cell.inRange = cell.inRange =
(props.minDate && (propsMinDate.value &&
calTime.isSameOrAfter(props.minDate, 'month') && calTime.isSameOrAfter(propsMinDate.value, 'month') &&
calEndDate && calEndDate &&
calTime.isSameOrBefore(calEndDate, 'month')) || calTime.isSameOrBefore(calEndDate, 'month')) ||
(props.minDate && (propsMinDate.value &&
calTime.isSameOrBefore(props.minDate, 'month') && calTime.isSameOrBefore(propsMinDate.value, 'month') &&
calEndDate && calEndDate &&
calTime.isSameOrAfter(calEndDate, 'month')) calTime.isSameOrAfter(calEndDate, 'month'))
if (props.minDate?.isSameOrAfter(calEndDate)) { if (propsMinDate.value?.isSameOrAfter(calEndDate)) {
cell.start = calEndDate && calTime.isSame(calEndDate, 'month') 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 { } 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') cell.end = calEndDate && calTime.isSame(calEndDate, 'month')
} }
@ -142,7 +149,7 @@ export default defineComponent({
}) })
const getCellStyle = (cell) => { const getCellStyle = (cell) => {
const style = {} as any const style = {} as any
const year = props.date.year() const year = propsDate.value.year()
const today = new Date() const today = new Date()
const month = cell.text const month = cell.text
@ -193,7 +200,7 @@ export default defineComponent({
lastColumn.value = column lastColumn.value = column
ctx.emit('changerange', { ctx.emit('changerange', {
selecting: true, 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 column = target.cellIndex
const row = target.parentNode.rowIndex const row = target.parentNode.rowIndex
const month = row * 4 + column 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.selectionMode === 'range') {
if (!props.rangeState.selecting) { if (!props.rangeState.selecting) {
ctx.emit('pick', { minDate: newDate, maxDate: null }) ctx.emit('pick', { minDate: newDate, maxDate: null })
ctx.emit('select', true) ctx.emit('select', true)
} else { } else {
if (newDate >= props.minDate) { if (newDate >= propsMinDate.value) {
ctx.emit('pick', { minDate: props.minDate, maxDate: newDate }) ctx.emit('pick', { minDate: propsMinDate.value, maxDate: newDate })
} else { } else {
ctx.emit('pick', { minDate: newDate, maxDate: props.minDate }) ctx.emit('pick', { minDate: newDate, maxDate: propsMinDate.value })
} }
ctx.emit('select', false) ctx.emit('select', false)
} }