526互联

element-plus的type类型为daterange的时候限制时间选择

发布时间 2023-12-22 10:26:46作者: 干饭吧

对于 Element Plus 的日期时间范围选择组件（el-date-picker 的 type 设置为 "daterange"），你可以使用 :picker-options 属性来设置选项，通过 disabledDate 函数来禁止选择当前时间之前的日期。

下面是一个 el-date-picker（type 为 "daterange"）的示例，它禁止选择今天之前的日期：

<el-date-picker
  v-model="dateRange"
  :picker-options="pickerOptions"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>
 
import { ref } from 'vue'

export default {
  setup() {
    const dateRange = ref([])

    const pickerOptions = {
      disabledDate(time) {
        const today = new Date()
        return time.getTime() < today.setHours(0, 0, 0, 0) // 禁止选择今天之前的日期
      }
    }

    return {
      dateRange,
      pickerOptions
    }
  }
}