新建日程-修复选择开始时间打不开的问题

This commit is contained in:
WindowBird 2025-11-05 09:18:35 +08:00
parent a7d2a807a5
commit 40f09f5df7

View File

@ -87,11 +87,21 @@
<!-- 日期选择 -->
<view class="date-section">
<text class="section-label">日期</text>
<uv-calendar
ref="startDateCalendar"
mode="single"
@confirm="handleStartDateConfirm"
/>
<view class="date-picker-wrapper">
<view class="date-display" @click="openStartDateCalendar">
<text>{{ startDateText || '选择日期' }}</text>
<text class="date-icon">📅</text>
</view>
<view class="calendar-wrapper">
<uv-calendar
ref="startDateCalendar"
mode="single"
v-model="formData.startDate"
:default-date="formData.startDate || ''"
@confirm="handleStartDateConfirm"
/>
</view>
</view>
</view>
<!-- 时间选择 -->
<view class="time-section-picker">
@ -123,11 +133,21 @@
<!-- 日期选择 -->
<view class="date-section">
<text class="section-label">日期</text>
<uv-calendar
ref="endDateCalendar"
mode="single"
@confirm="handleEndDateConfirm"
/>
<view class="date-picker-wrapper">
<view class="date-display" @click="openEndDateCalendar">
<text>{{ endDateText || '选择日期' }}</text>
<text class="date-icon">📅</text>
</view>
<view class="calendar-wrapper">
<uv-calendar
ref="endDateCalendar"
mode="single"
v-model="formData.endDate"
:default-date="formData.endDate || formData.startDate || ''"
@confirm="handleEndDateConfirm"
/>
</view>
</view>
</view>
<!-- 时间选择 -->
<view class="time-section-picker">
@ -426,6 +446,20 @@ const initDates = (dateStr = '') => {
}
};
//
const openStartDateCalendar = () => {
if (startDateCalendar.value) {
startDateCalendar.value.open();
}
};
//
const openEndDateCalendar = () => {
if (endDateCalendar.value) {
endDateCalendar.value.open();
}
};
//
const handleStartDateConfirm = (e) => {
const formattedDate = formatDateToYYYYMMDD(e);
@ -882,6 +916,39 @@ onLoad((options) => {
margin-bottom: 8px;
}
.date-picker-wrapper {
position: relative;
}
.date-display {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: all 0.3s;
}
.date-display:active {
background: #f5f5f5;
border-color: #2885ff;
}
.date-display text {
font-size: 16px;
color: #333;
}
.date-icon {
font-size: 18px;
margin-left: 8px;
}
.time-section-picker {
margin-top: 20px;
}