两个输入框实现element 日期和时间范围选择

最新推荐文章于 2024-03-28 16:00:18 发布

原创最新推荐文章于 2024-03-28 16:00:18 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

element ui

3 篇文章

订阅专栏

本文介绍如何使用Element UI的时间选择器组件(el-date-picker)，通过设置disabledDate属性来确保选择的开始时间不会超过结束时间，同时确保结束时间不会早于开始时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element 起始与结束时刻分两个输入框实现,时间控件el-date-picker设置起始时间不能大于结束时间

<el-form-item label="开始时间" prop="startTime">
  <el-date-picker type="datetime" placeholder="开始时间" v-model="dataForm.startTime"  :picker-options="startDatePicker" format="yyyy-MM-dd HH:mm:ss"  >
  </el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
  <el-date-picker type="datetime" placeholder="结束时间" v-model="dataForm.endTime" :picker-options="endDatePicker" format="yyyy-MM-dd HH:mm:ss"   >
  </el-date-picker>
</el-form-item>

data(){
     startDatePicker: this.beginDate(), //开始时间控制
      endDatePicker: this.processDate(), //结束时间控制
}

methods: {
    beginDate(){
      const self = this
      return {
        disabledDate(time){
          if (self.dataForm.endTime) {  
          //如果结束时间不为空，则小于结束时间
            return new Date(self.dataForm.endTime).getTime() < time.getTime()
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate() {
      const  self = this
      return {
        disabledDate(time) {
          if (self.dataForm.startTime) {  //如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.dataForm.startTime).getTime() > time.getTime()
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    }
}