elementUI DateTimePicker根据选取日期来设置时间选择范围

杨小羊羊

已于 2024-01-24 09:09:02 修改

阅读量1.5k

点赞数 5

文章标签： elementui 前端 javascript

于 2024-01-23 20:01:31 首次发布

本文链接：https://blog.csdn.net/leBronJ/article/details/135785461

版权

文章讲述了如何在Vue.js应用中，通过watch和disabledDate函数，动态控制el-date-picker组件的时间选择范围，以适应不同的日期条件。

摘要由CSDN通过智能技术生成

首先，需要定义一个变量来存储当前选择的日期值，比如 selectedDate。然后，使用该变量作为picker-options的参数之一，指定时间选择器的最小时间和最大时间。

下面是示例代码：

<template>
  <div>
    <el-date-picker v-model="selectedDate" type="datetime" :picker-options="timeRange"></el-date-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedDate: '', // 保存选择的日期值
      timeRange: {}     // 初始化时间选择范围对象
    };
  },
  watch: {
    selectedDate(newVal) {
      if (newVal !== '') {
        const startTime = new Date();   // 获取今天的起始时间
        const endTime = new Date(startTime);
        
        // 将结束时间设置为明天的开始时间（0点）
        endTime.setHours(23, 59, 59, 999);
        
        this.timeRange = {
          disabledDate(current) {
            // 判断当前日期是否超出了选择的日期范围
            return current && (current > endTime || current < startTime);
          }
        };
      } else {
        this.timeRange = {}; // 清空时间选择范围
      }
    }
  }
};
</script>

上述代码中，我们通过watch监听selectedDate的变化，并根据其值动态更新timeRange对象。在disabledDate函数内部，我们判断当前日期是否超出了选择的日期范围，若超出则返回true，表示不可选；反之返回false，表示可选。这样就能限制时间选择器只显示符合条件的时间段。

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    let me = this;
    return {
      selectableRange:'',
      value: '', // 存放选定的日期和时间值
      pickerOptions: {
        disabledDate(time) {
          const start = new Date('2021-01-01'); // 开始日期
          const end = new Date(); // 结束日期为当前日期
          
          if (time.getTime() > end || time.getTime() < start) {
            return true; // 超出指定范围则返回true，不可选
          } else {
            return false; // 否则返回false，可选
          }
        },
        selectableRange: me.selectableRange // 可选时间范围
      }
    };
  },
  watch:{
    value(newdata,old){
      if(newdata != ''){
        console.log(newdata)
        //new Date().getDate()
        console.log(newdata.getDate());
        if(newdata.getDate()>20){
          this.$set(this.pickerOptions,'selectableRange','09:00:00 - 18:00:00')
          //this.selectableRange = '09:00:00 - 18:00:00'
        }else{
          this.$set(this.pickerOptions,'selectableRange','12:00:00 - 18:00:00')

          //this.selectableRange = '12:00:00 - 18:00:00'
        }
      }
    }
  }
};
</script>