100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
Vue
<template>
|
|
<view class="relative">
|
|
<!-- 输入框触发 -->
|
|
<input
|
|
type="text"
|
|
readonly
|
|
:value="selectedDate ? selectedDate.format('YYYY-MM-DD') : '选择日期'"
|
|
@click="showCalendar = !showCalendar"
|
|
class="w-full px-4 py-2 border-2 border-[#9C032D] rounded-lg cursor-pointer bg-white"
|
|
/>
|
|
|
|
<!-- 日历容器 -->
|
|
<view
|
|
v-if="showCalendar"
|
|
class="fixed bottom-0 left-1/2 transform -translate-x-1/2 mb-4 w-[320px] bg-[#f8d7da] border-2 border-[#9C032D] rounded-lg p-4 z-50 shadow-xl"
|
|
>
|
|
<!-- 头部 -->
|
|
<view class="flex justify-between items-center mb-4">
|
|
<button @click="changeMonth(-1)" class="text-[#9C032D] hover:text-[#80022a] transition-colors">◀</button>
|
|
<view class="font-bold text-[#9C032D]">
|
|
{{ currentDate.format('YYYY年MM月') }}
|
|
</view>
|
|
<button @click="changeMonth(1)" class="text-[#9C032D] hover:text-[#80022a] transition-colors">▶</button>
|
|
</view>
|
|
|
|
<!-- 星期 -->
|
|
<view class="grid grid-cols-7 gap-1 mb-2">
|
|
<view v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day" class="text-center text-sm text-[#9C032D] font-medium">
|
|
{{ day }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期格子 -->
|
|
<view class="grid grid-cols-7 gap-1">
|
|
<view
|
|
v-for="(date, index) in calendarDays"
|
|
:key="index"
|
|
@click="selectDate(date)"
|
|
:class="[
|
|
'text-center p-1 rounded cursor-pointer transition-colors',
|
|
date.month() !== currentDate.month() ? 'text-gray-400' : 'text-[#9C032D]',
|
|
date.isSame(selectedDate, 'day') ? 'bg-[#9C032D] text-white' : 'hover:bg-[#f5b5ba]',
|
|
]"
|
|
>
|
|
{{ date.date() }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 确认按钮 -->
|
|
<button @click="confirmDate" class="w-full mt-4 py-2 bg-[#9C032D] text-white rounded-lg hover:bg-[#80022a] transition-colors">确认</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
|
|
const props = defineProps({
|
|
modelValue: String, // 接收外部v-model
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'confirm']);
|
|
|
|
const showCalendar = ref(false);
|
|
const currentDate = ref(dayjs());
|
|
const selectedDate = ref(props.modelValue ? dayjs(props.modelValue) : null);
|
|
|
|
// 生成日历日期数组
|
|
const calendarDays = computed(() => {
|
|
const start = currentDate.value.startOf('month').startOf('week');
|
|
const end = currentDate.value.endOf('month').endOf('week');
|
|
const days = [];
|
|
let day = start;
|
|
|
|
while (day <= end) {
|
|
days.push(day);
|
|
day = day.add(1, 'day');
|
|
}
|
|
return days;
|
|
});
|
|
|
|
// 切换月份
|
|
const changeMonth = (delta) => {
|
|
currentDate.value = currentDate.value.add(delta, 'month');
|
|
};
|
|
|
|
// 选择日期
|
|
const selectDate = (date) => {
|
|
selectedDate.value = date;
|
|
};
|
|
|
|
// 确认选择
|
|
const confirmDate = () => {
|
|
showCalendar.value = false;
|
|
emit('update:modelValue', selectedDate.value.format('YYYY-MM-DD'));
|
|
emit('confirm', selectedDate.value.format('YYYY-MM-DD'));
|
|
};
|
|
</script>
|