Browse Source

改造时间过滤器

macmini 1 week ago
parent
commit
0d46133771
1 changed files with 20 additions and 18 deletions
  1. 20 18
      src/components/FilterTime.vue

+ 20 - 18
src/components/FilterTime.vue

@@ -46,11 +46,11 @@ const state = reactive({
 const datePickerConfig = reactive({
     // 日期格式
     format: 'yyyy-MM-dd',
-    // 当前选择的日期
-    value: dayjs().format('YYYY-MM-DD'),
-    // 最小日期(可选)
+    // 当前选择的日期(时间戳)
+    value: new Date().getTime(),
+    // 最小日期(可选,时间戳
     minDate: 0,
-    // 最大日期(可选)
+    // 最大日期(可选,时间戳
     maxDate: 0,
 })
 
@@ -81,12 +81,14 @@ function openDatePicker(type: 'start' | 'end') {
     state.currentDateType = type
     // 设置当前选择的日期
     if (type === 'start') {
-        datePickerConfig.value = state.startTime || dayjs().format('YYYY-MM-DD')
+        // 确保日期格式正确,无论是字符串还是时间戳
+        datePickerConfig.value = state.startTime ? new Date(state.startTime).getTime() : new Date().getTime()
         // 结束时间之后的日期不可选
         datePickerConfig.maxDate = state.endTime ? new Date(state.endTime).getTime() : 0
     }
     else {
-        datePickerConfig.value = state.endTime || dayjs().format('YYYY-MM-DD')
+        // 确保日期格式正确,无论是字符串还是时间戳
+        datePickerConfig.value = state.endTime ? new Date(state.endTime).getTime() : new Date().getTime()
         // 开始时间之前的日期不可选
         datePickerConfig.minDate = state.startTime ? new Date(state.startTime).getTime() : 0
     }
@@ -100,7 +102,8 @@ function closeDatePicker() {
 
 // 选择日期确认
 function confirmDate() {
-    const selectedDate = datePickerConfig.value
+    // 将时间戳转换为 YYYY-MM-DD 格式
+    const selectedDate = dayjs(datePickerConfig.value).format('YYYY-MM-DD')
 
     if (state.currentDateType === 'start') {
         state.startTime = selectedDate
@@ -152,15 +155,15 @@ function confirmSelection() {
 }
 
 // 重置选择
-function resetSelection() {
-    state.startTime = ''
-    state.endTime = ''
-    state.startText = '开始时间'
-    state.endText = '结束时间'
-    state.displayText = props.placeholder || '选择时间区间'
-    emit('update:value', ['', ''])
-    emit('reset')
-}
+// function resetSelection() {
+//     state.startTime = ''
+//     state.endTime = ''
+//     state.startText = '开始时间'
+//     state.endText = '结束时间'
+//     state.displayText = props.placeholder || '选择时间区间'
+//     emit('update:value', ['', ''])
+//     emit('reset')
+// }
 
 // 暴露方法给父组件
 defineExpose({
@@ -184,14 +187,13 @@ defineExpose({
         <up-popup
             v-model:show="state.popupVisible"
             mode="top"
-            :closeable="true"
             @close="closePopup"
         >
             <view class="time-picker-container">
                 <!-- 标题栏 -->
                 <view class="time-picker-header">
                     <text class="title">时间筛选</text>
-                    <text class="reset-btn" @click="resetSelection">重置</text>
+                    <!-- <text class="reset-btn" @click="resetSelection">重置</text> -->
                 </view>
 
                 <!-- 时间选择区域 -->