refactor(时间选择器): 简化日期选择器组件并修改日期格式
移除van-picker-group包装器,直接使用van-date-picker 修改日期格式为年-月-日,移除时间部分 初始化日期值为2024-01-01和2024-12-31
Showing
1 changed file
with
18 additions
and
16 deletions
| ... | @@ -183,24 +183,26 @@ | ... | @@ -183,24 +183,26 @@ |
| 183 | 183 | ||
| 184 | <!-- 开始时间选择器 --> | 184 | <!-- 开始时间选择器 --> |
| 185 | <van-popup v-model:show="showStartTimePicker" position="bottom"> | 185 | <van-popup v-model:show="showStartTimePicker" position="bottom"> |
| 186 | - <van-picker-group | 186 | + <van-date-picker |
| 187 | + v-model="startDate" | ||
| 187 | title="选择开始时间" | 188 | title="选择开始时间" |
| 189 | + :min-date="minDate" | ||
| 190 | + :max-date="maxDate" | ||
| 188 | @confirm="onStartTimeConfirm" | 191 | @confirm="onStartTimeConfirm" |
| 189 | @cancel="showStartTimePicker = false" | 192 | @cancel="showStartTimePicker = false" |
| 190 | - > | 193 | + /> |
| 191 | - <van-date-picker v-model="startDate" :min-date="minDate" :max-date="maxDate" /> | ||
| 192 | - </van-picker-group> | ||
| 193 | </van-popup> | 194 | </van-popup> |
| 194 | - | 195 | + |
| 195 | <!-- 结束时间选择器 --> | 196 | <!-- 结束时间选择器 --> |
| 196 | <van-popup v-model:show="showEndTimePicker" position="bottom"> | 197 | <van-popup v-model:show="showEndTimePicker" position="bottom"> |
| 197 | - <van-picker-group | 198 | + <van-date-picker |
| 199 | + v-model="endDate" | ||
| 198 | title="选择结束时间" | 200 | title="选择结束时间" |
| 201 | + :min-date="minDate" | ||
| 202 | + :max-date="maxDate" | ||
| 199 | @confirm="onEndTimeConfirm" | 203 | @confirm="onEndTimeConfirm" |
| 200 | @cancel="showEndTimePicker = false" | 204 | @cancel="showEndTimePicker = false" |
| 201 | - > | 205 | + /> |
| 202 | - <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" /> | ||
| 203 | - </van-picker-group> | ||
| 204 | </van-popup> | 206 | </van-popup> |
| 205 | 207 | ||
| 206 | <!-- 课程选择器 --> | 208 | <!-- 课程选择器 --> |
| ... | @@ -352,8 +354,8 @@ const showClassPicker = ref(false); | ... | @@ -352,8 +354,8 @@ const showClassPicker = ref(false); |
| 352 | const showGroupPicker = ref(false); | 354 | const showGroupPicker = ref(false); |
| 353 | 355 | ||
| 354 | // 日期选择器相关 | 356 | // 日期选择器相关 |
| 355 | -const startDate = ref(new Date()); | 357 | +const startDate = ref(['2024', '01', '01']); |
| 356 | -const endDate = ref(new Date()); | 358 | +const endDate = ref(['2024', '12', '31']); |
| 357 | const minDate = new Date(2020, 0, 1); | 359 | const minDate = new Date(2020, 0, 1); |
| 358 | const maxDate = new Date(2030, 11, 31); | 360 | const maxDate = new Date(2030, 11, 31); |
| 359 | 361 | ||
| ... | @@ -473,9 +475,7 @@ const formatDateTime = (date) => { | ... | @@ -473,9 +475,7 @@ const formatDateTime = (date) => { |
| 473 | const year = d.getFullYear(); | 475 | const year = d.getFullYear(); |
| 474 | const month = String(d.getMonth() + 1).padStart(2, '0'); | 476 | const month = String(d.getMonth() + 1).padStart(2, '0'); |
| 475 | const day = String(d.getDate()).padStart(2, '0'); | 477 | const day = String(d.getDate()).padStart(2, '0'); |
| 476 | - const hours = String(d.getHours()).padStart(2, '0'); | 478 | + return `${year}-${month}-${day}`; |
| 477 | - const minutes = String(d.getMinutes()).padStart(2, '0'); | ||
| 478 | - return `${year}-${month}-${day} ${hours}:${minutes}`; | ||
| 479 | }; | 479 | }; |
| 480 | 480 | ||
| 481 | /** | 481 | /** |
| ... | @@ -500,7 +500,8 @@ const onFrequencyConfirm = (option) => { | ... | @@ -500,7 +500,8 @@ const onFrequencyConfirm = (option) => { |
| 500 | * 开始时间确认 | 500 | * 开始时间确认 |
| 501 | */ | 501 | */ |
| 502 | const onStartTimeConfirm = () => { | 502 | const onStartTimeConfirm = () => { |
| 503 | - formData.value.start_time = startDate.value; | 503 | + const [year, month, day] = startDate.value; |
| 504 | + formData.value.start_time = new Date(parseInt(year), parseInt(month) - 1, parseInt(day)); | ||
| 504 | showStartTimePicker.value = false; | 505 | showStartTimePicker.value = false; |
| 505 | }; | 506 | }; |
| 506 | 507 | ||
| ... | @@ -508,7 +509,8 @@ const onStartTimeConfirm = () => { | ... | @@ -508,7 +509,8 @@ const onStartTimeConfirm = () => { |
| 508 | * 结束时间确认 | 509 | * 结束时间确认 |
| 509 | */ | 510 | */ |
| 510 | const onEndTimeConfirm = () => { | 511 | const onEndTimeConfirm = () => { |
| 511 | - formData.value.end_time = endDate.value; | 512 | + const [year, month, day] = endDate.value; |
| 513 | + formData.value.end_time = new Date(parseInt(year), parseInt(month) - 1, parseInt(day)); | ||
| 512 | showEndTimePicker.value = false; | 514 | showEndTimePicker.value = false; |
| 513 | }; | 515 | }; |
| 514 | 516 | ... | ... |
-
Please register or login to post a comment