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

最新推荐文章于 2024-03-25 16:10:15 发布

小伙子の

最新推荐文章于 2024-03-25 16:10:15 发布

阅读量912

点赞数 1

文章标签： javascript 前端 vue.js

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

版权

//探访开始时间
<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
            )
          }
        }
      },