el-date-picker 日期时间选择器 限时时间范围 精确到时分秒

官方的disabledDate属性：设置禁用状态，参数为当前日期，要求返回 Boolean，它只能禁用日期，对于时间并不能直接禁用，总结以下两个方法解决禁用时间：

1.通过watch去监听源数据：

1.1 组件

          <el-form-item label="任务时间" prop="time">
            <el-date-picker
              :disabledDate="disabledDate"
              style="width: 100%"
              v-model="form.time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2 watch函数来监听数据变化

methods:{
	  //只能禁用日期
	  disabledDate (time) {
      // 禁止选择当前时间之前的日期
      return time.getTime() < Date.now() - 24 * 3600 * 1000;
    },
},
watch：{
	//禁用时间
    'form.time'(newVal) {
      // 如果开始时间是在当前时间之前，就重置时间
      if (newVal && newVal[0] && new Date(newVal[0]).getTime() < Date.now()) {
        this.$nextTick(() => {
          this.$message({
            type: 'error',
            message: '开始时间不能早于当前时间！'
          });
          this.form.time = ['', ''];
        });
      }
      // 如果结束时间是在当前时间之前，也重置时间
      if (newVal && newVal[1] && new Date(newVal[1]).getTime() < Date.now()) {
        this.$nextTick(() => {
          this.$message({
            type: 'error',
            message: '结束时间不能早于当前时间！'
          });
          this.form.time = ['', ''];
        });
      }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

2.通过el-form表单校验去给校验错误提示（体验会好些）

computed:{
	 rules () {
	  	return {
	  		time: [
         	 { required: true, message: '请输入任务时间', trigger: 'blur' },
         	 {
            	validator: this.checkTimeRange,
           	    trigger: 'change'
         	 }
        ],
	  }
	 }
},
methods:{
	 checkTimeRange (rule, value, callback) {
      if (!value || !value[0] || !value[1]) {
        callback(new Error('请选择时间范围'));
      } else if (new Date(value[0]).getTime() < Date.now()) {
        callback(new Error('开始时间不能早于当前时间'));
      } else if (new Date(value[1]).getTime() < Date.now()) {
        callback(new Error('结束时间不能早于当前时间'));
      } else {
        callback();
      }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26