封装原生input datetime-local类型的时间选择器

一、开始时间未选中时隐藏结束时间输入框

实现逻辑：
通过计算属性 showEndTime 动态控制结束时间输入框的显示。当且仅当开始时间有效（非空）且不等于当前时间时，显示结束时间输入框。

const showEndTime = computed(() => 
  startTime.value && startTime.value !== currentTime.value
)

关键点：
• 双条件判断确保用户必须选择有效开始时间后才可操作结束时间
• 避免用户误操作未完成的时间选择流程

---

二、极端情况处理（开始时间大于当前时间时自动调整）

实现逻辑：
在开始时间输入事件中，检测时间是否超过当前时间，若超过则自动回退到15分钟前。

const handleTimeInput = (type, event) => {
   
  if (type === 'start') {
   
    const value = event.target.value
    if (dayjs(value).isAfter(currentTime.value)) {
   
      startTime.value = dayjs().subtract(15, 'minute').format('YYYY-MM-DDTHH:mm')
    }
  }
}

防御式编程：
• 使用Day.js精确比较时间
• 硬编码15分钟作为安全阈值，确保时间有效性

---

三、时间选择下拉面板的禁用未来时间

实现方案：
通过HTML5原生属性限制输入范围，利用max属性绑定当前时间。

<input 
  type="datetime-local" 
  :max="currentTime"
  v-model="startTime"
>

浏览器行为：
• 现代浏览器会自动禁用日历控件中的未来日期
• 移动端设备根据系统时区显示适配界面

---

四、结束时间范围限制（大于开始时间且小于当前时间）

双层约束：
同时绑定min和max属性实现双向限制。

<input 
  type="datetime-local"
  :min="startTime"
  :max="currentTime"
  v-model="endTime"
>

动态边界：
• min随开始时间动态变化，确保时间序列正确性
• max始终保持为当前时间，防止未来时间选择

---

五、时间交换逻辑（结束时间早于开始时自动交换）

通过响应式监听自动调换非法时间顺序。

watchEffect(() => {
   
  if (startTime.value && endTime.value) {
   
    const start = dayjs(startTime.value)
    const end = dayjs(endTime.value)
    if (end.isBefore(start)) {
   
      [startTime.value, endTime.value] = [endTime.value, startTime.value]
    }
  }
})

实现亮点：
• 使用数组解构实现值交换
• 仅在两者都有值时触发判断，避免空值干扰

---

六、24小时格式的定制

标准化方案：
通过Day.js格式化和HTML5输入类型实现。

const currentTime = computed(() =>