2021-09-22

最新推荐文章于 2024-11-11 19:29:13 发布

Yupiece

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量99

点赞数

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/Yupiece/article/details/120412300

版权

基于Elementui 日期时间选择器有关问题实现

需求开始时间控制结束时间范围

//HTML部分
  <div class="demoWrapper-condition-list">
          <el-date-picker
            v-model="startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :picker-options="startDateTime"
            placeholder="开始日期时间"
          >
          </el-date-picker>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="endDateTime"
            placeholder="结束日期时间"
          >
          </el-date-picker>
        </div>

// JS部分
export default {
        data() {
          return {
             startTime: '',
             endTime: '',
         }
 }
computed: {
    startDateTime() {
      // 动态起始时间  
      // Date.now(） 获取当前日期
      // disabledDate    设置禁用状态，参数为当前日期，要求返回 Boolean
      return {
        disabledDate(time) {
                    let endDateVal = this.endTime;
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime();
                   }
         };
      };
    },
    endDateTime() {
      // 动态起始时间
      return {
        disabledDate(time) {
                  let startDateVal = this.startTime;
                   if (startDateVal) {
                       return  time.getTime() < new Date(startDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
                  }
      };
    },
  },