hookehuyr

feat(日历组件): 添加清空选中日期功能并优化日期切换按钮显示

在日历组件中添加清空选中日期的功能,并优化日期切换按钮的显示样式和文本
当有选中日期时显示具体日期,无选中日期时显示"切换日期"
添加清空按钮用于快速清除当前选中状态
<!--
* @Date: 2025-01-25 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-22 20:26:40
* @LastEditTime: 2026-01-22 20:44:20
* @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
* @Description: 可折叠日历组件
-->
......@@ -29,7 +29,7 @@
<div class="calendar-date-display" @click="expandCalendar">
<div class="calendar-date-main">{{ formattedCurrentDate }}</div>
<div class="calendar-weekday">{{ formattedWeekday }}</div>
<div class="text-xs text-gray-500 mt-1 collapsible-text p-1 bg-white w-20 text-center rounded-full border border-gray-200">切换日期</div>
<div class="text-xs text-gray-500 mt-1 collapsible-text px-3 py-1 bg-white text-center rounded-full border border-gray-200 inline-block min-w-[5rem] max-w-[8rem]">{{ toggleButtonText }}</div>
</div>
<!-- <div class="calendar-action">
<div class="calendar-action-text">指定日期</div>
......@@ -63,6 +63,13 @@
@close="collapseCalendar"
>
<div class="calendar-popup-content">
<button
v-if="hasSelectedDate"
class="absolute top-3 right-3 z-10 text-xs px-3 py-1 rounded-full border border-green-600 text-green-600 bg-white"
@click.stop="clearSelectedDate"
>
清空
</button>
<van-calendar
ref="calendarRef"
:poppable="false"
......@@ -144,11 +151,15 @@ const props = defineProps({
subtaskList: {
type: Array,
default: () => []
},
hasSelectedDate: {
type: Boolean,
default: false
}
})
// Emits定义
const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course'])
const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course', 'clear-date'])
// 响应式数据
const isExpanded = ref(false)
......@@ -321,6 +332,13 @@ const formattedWeekday = computed(() => {
return weekdays[dayjs(currentDate.value).day()]
})
const toggleButtonText = computed(() => {
if (!props.hasSelectedDate) return '切换日期'
const date_val = props.modelValue || currentDate.value
const text = dayjs(date_val).format('YYYY-MM-DD')
return `选中 ${text}`
})
/**
* 展开日历
*/
......@@ -366,6 +384,17 @@ const onPanelChange = (panel) => {
emit('panel-change', panel)
}
const clearSelectedDate = () => {
const today = new Date()
currentDate.value = today
if (calendarRef.value && typeof calendarRef.value.reset === 'function') {
calendarRef.value.reset(today)
}
emit('update:modelValue', today)
emit('clear-date')
collapseCalendar()
}
// 监听modelValue变化
watch(() => props.modelValue, (newValue) => {
if (newValue) {
......@@ -592,6 +621,7 @@ defineExpose({
}
.calendar-popup-content {
position: relative;
height: 100%;
overflow: hidden;
......
......@@ -15,11 +15,13 @@
:title="taskDetail.title"
:formatter="formatter"
:subtask-list="taskDetail.subtask_list"
:has-selected-date="hasUserSelectedDate"
v-model="selectedDate"
@select="onSelectDay"
@click-subtitle="onClickSubtitle"
@panel-change="onPanelChange"
@select-course="onSelectCourse"
@clear-date="onClearSelectedDate"
/>
</div>
......@@ -335,6 +337,24 @@ const selectedDate = ref(new Date());
const hasUserSelectedDate = ref(!!route.query.date)
const isInitializing = ref(true)
const onClearSelectedDate = () => {
const next_query = { ...route.query }
delete next_query.date
router.replace({
path: route.path,
query: next_query
})
hasUserSelectedDate.value = false
selectedDate.value = dayjs().format('YYYY-MM-DD')
getTaskDetail(dayjs().format('YYYY-MM'))
page.value = 0
checkinDataList.value = []
finished.value = false
onLoad(null, false)
}
const onSelectDay = (day) => {
const currentSelectedDate = dayjs(day).format('YYYY-MM-DD');
......@@ -394,7 +414,7 @@ const onSelectCourse = (course) => {
checkinDataList.value = []
finished.value = false
// 重新加载数据
onLoad(route.query.date, hasUserSelectedDate.value)
onLoad(hasUserSelectedDate.value ? (route.query.date || selectedDate.value) : null, hasUserSelectedDate.value)
}
/**
......