vue3 el-date-picker 需求是想既可以输入,也可以选择, 且开始时间不能大于结束时间, 当不符合条件时border变成红色

天天向上10242026-04-02 8:56

html 复制代码

<template>
  <div class="date-picker-group">
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="开始时间"
      :class="{ 'is-error': startDateError }"
      editable
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      @change="handleDateChange"
    />
    <span class="line">-</span>
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="结束时间"
      :class="{ 'is-error': endDateError }"
      editable
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      @change="handleDateChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const startDate = ref('')
const endDate = ref('')
const startDateError = ref(false)
const endDateError = ref(false)

const handleDateChange = () => {
  if (!startDate.value || !endDate.value) {
    startDateError.value = false
    endDateError.value = false
    return
  }
  const isValid = new Date(startDate.value) <= new Date(endDate.value)
  startDateError.value = !isValid
  endDateError.value = !isValid
}
</script>

<style scoped>
.date-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.line {
  margin: 0 5px;
  color: #999;
}

:deep(.el-date-editor.el-input.is-error),
:deep(.el-date-editor.el-input__wrapper) {
  border: 1px solid #f56c6c !important;
}
</style>