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>

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 = ['', ''];
        });
      }
    },
}

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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值