diff --git a/app/components/Admin/AdminDatePicker.vue b/app/components/Admin/AdminDatePicker.vue index 30745f5..fb513ad 100644 --- a/app/components/Admin/AdminDatePicker.vue +++ b/app/components/Admin/AdminDatePicker.vue @@ -239,10 +239,12 @@ const selectDate = (dateValue) => { emit('change', dateValue) } -const scrollToDateElement = (behavior = 'smooth') => { - if (!dateSelector.value || !props.modelValue) return - const el = dateSelector.value.querySelector(`[data-date="${props.modelValue}"]`) - if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' }) +const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => { + if (!dateSelector.value) return + const dateKey = targetDate || formatDateStr(today) + const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`) + if (!el) return + el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' }) } const handleWheel = (event) => { @@ -324,7 +326,7 @@ watch(() => props.modelValue, () => { }) onMounted(() => { - nextTick(() => scrollToDateElement('auto')) + nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth')) }) diff --git a/app/components/Admin/AdminMultiDatePicker.vue b/app/components/Admin/AdminMultiDatePicker.vue index db9553b..dfe6b9f 100644 --- a/app/components/Admin/AdminMultiDatePicker.vue +++ b/app/components/Admin/AdminMultiDatePicker.vue @@ -377,17 +377,18 @@ const handleScroll = () => { } } +const scrollToDateElement = (targetDate, behavior = 'smooth') => { + if (!dateSelector.value || !targetDate) return + const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`) + if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' }) +} + const scrollToToday = () => { if (dateRange.value.start > 0 || dateRange.value.end < 0) { dateRange.value.start = -3 dateRange.value.end = 25 } - nextTick(() => { - if (!dateSelector.value) return - const todayStr = formatDateStr(today) - const el = dateSelector.value.querySelector(`[data-date="${todayStr}"]`) - if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }) - }) + nextTick(() => scrollToDateElement(formatDateStr(today), 'smooth')) } const toggleCalendar = () => { @@ -399,8 +400,35 @@ const goToday = () => { calendarMonth.value = today.getMonth() } +watch(() => props.modelValue, (newVal) => { + if (!newVal || !newVal.length) return + nextTick(() => { + // 跳到第一个 >= 今天的日期,否则跳第一个选中项 + const todayStr = formatDateStr(today) + const target = newVal.find(d => d >= todayStr) || newVal[0] + // 如果目标超出当前范围,扩展 range + const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000) + if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) { + dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3) + dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5) + } + nextTick(() => scrollToDateElement(target, 'smooth')) + }) +}) + onMounted(() => { - nextTick(() => scrollToToday()) + if (props.modelValue && props.modelValue.length) { + const todayStr = formatDateStr(today) + const target = props.modelValue.find(d => d >= todayStr) || props.modelValue[0] + const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000) + if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) { + dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3) + dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5) + } + nextTick(() => nextTick(() => scrollToDateElement(target, 'smooth'))) + } else { + nextTick(() => scrollToToday()) + } })