DateTimePicker 日期时间选择器的picker-options属性

最新推荐文章于 2025-03-28 10:54:55 发布

小伙子の

最新推荐文章于 2025-03-28 10:54:55 发布

阅读量1.1k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_62037944/article/details/131393816

版权

该代码段展示了在Vue.js中使用ElementUI的日期选择器组件进行探访开始与结束时间的选择，并实现时间顺序验证，确保结束时间总是在开始时间之后。当选择的时间不符合条件时，会显示警告信息并清空所选时间。

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

//探访开始时间
<el-form-item label="探访时间:" prop="visitingHours">
              <el-date-picker
                v-model="addForm.visitingHours"
                type="datetime"
                placeholder="请选择时间"
                clearable
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
                @change="changeStart"
                :disabled="dialogTitle != '新增'"
              ></el-date-picker>
            </el-form-item>
 //探访结束时间
 <el-form-item label="探访结束时间:" prop="visitingEndHours">
              <el-date-picker
                v-model="addForm.visitingEndHours"
                type="datetime"
                placeholder="请选择时间"
                clearable
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                @change="changeEnd"
                style="width: 100%"
                :disabled="dialogTitle != '新增'"
              ></el-date-picker>
            </el-form-item>

//选择探访开始时间
    changeStart() {
      if (this.addForm.visitingEndHours != "") {
        if (this.addForm.visitingEndHours <= this.addForm.visitingHours) {
          this.$message.warning("探访结束时间必须大于开始时间！")
          this.addForm.visitingHours = ""
        }
      }
    },
    //选择探访结束时间
    changeEnd() {
      if (this.addForm.visitingHours != "") {
        if (this.addForm.visitingEndHours <= this.addForm.visitingHours) {
          this.$message.warning("探访结束时间必须大于开始时间！")
          this.addForm.visitingEndHours = ""
        }
      }
    },

//时间范围
 pickerOptions: {
        disabledDate(time) {
          //如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() < Date.now() - 8.64e7
        }
      },
//开始时间范围
 options1: {
        disabledDate: time => {
          if (this.dialog.form.endTime) {
            return (
              time.getTime() >= new Date(this.dialog.form.endTime).getTime()
            )
          }
        }
      },
//结束时间范围
      options2: {
        disabledDate: time => {
          if (this.dialog.form.startTime) {
            return (
              time.getTime() <= new Date(this.dialog.form.startTime).getTime()
            )
          }
        }
      },

options3: {
        disabledDate: time => {
          if (this.form.endTime && this.form.startTime) {
            return (
              time.getTime() > new Date(this.form.endTime).getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime() - 8.64e7
            )
          }
        }
      },