vue2 中 使用el-date-picker 类型为datetimerange，限制时间不能选今天以前的。以及不能回显还有回显后修改不能生效的问题！

1.这是HTML代码

 <el-form-item prop="strtime">
          <el-date-picker v-model="value1" 
          type="datetimerange" @change="change" 
          :picker-options="pickerOptions"
          range-separator="至" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期">
          </el-date-picker>
 </el-form-item>

 

 js代码，首先通过change事件将获取到的值进行赋值以及绑定值为:

export default {
  components: { VueEditor },
  data() {
    return {
        ...
      value1: [], //组件绑定值
      formData: {
        endTime: null,
        startTime: null
      },
     }
   }
}

 

 

// 时间范围选择改变事件
    change(e) {
      if (e[0] < new Date().getTime()) {
        e[0] = new Date().getTime()
      }
      if (e[1] < new Date().getTime()) {
        e[1] = new Date().getTime()
      }

      var date = new Date(e[0]);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() < 10 ? '0' + (date.getDate()) + ' ' : date.getDate() + ' '
      var h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
      var m = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
      // var s = date.getSeconds() <10 ? '0'+(date.getSeconds()):date.getSeconds();
      let date1 = Y + M + D + h + m
      var date = new Date(e[1]);
      var Y1 = date.getFullYear() + '-';
      var M1 = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D1 = date.getDate() < 10 ? '0' + (date.getDate()) + ' ' : date.getDate() + ' '
      var h1 = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
      var m1 = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
      // var s1 = date.getSeconds() <10 ? '0'+(date.getSeconds()):date.getSeconds();
      let date2 = Y1 + M1 + D1 + h1 + m1

      //将上面的拼接到一块

      this.$set(this.formData, 'startTime', date1)
      this.$set(this.formData, 'endTime', date2)
      // console.log(a);
    },

 对后端返回的时间处理：

后端返回格式：

处理

 

 这是整个请求代码

 // 获取详情
    getDetails(id) {
      return new Promise((resolve, reject) => {
        getAdvData({ id: id })
          .then((res) => {
            this.formData = res.data
            // 开始时间  年月日
            let yearDate = res.data.startTime.split(' ')[0]
            let sY = yearDate.split('-')[0]
            let sM = yearDate.split('-')[1]
            let sD = yearDate.split('-')[2]
            // 开始时间  时分
            let houseDate = res.data.startTime.split(' ')[1]
            let SH = houseDate.split(':')[0]
            let SM = houseDate.split(':')[1]
            // 结束时间
            let endDate = res.data.endTime.split(' ')[0]
            let eY = endDate.split('-')[0]
            let eM = endDate.split('-')[1]
            let eD = endDate.split('-')[2]
            // 开始时间  时分
            let houseEnd = res.data.endTime.split(' ')[1]
            let He = houseEnd.split(':')[0]
            let Me = houseEnd.split(':')[1]

            this.value1 = [new Date(sY, sM - 1, sD, SH, SM), new Date(eY, eM - 1, eD, He, Me)]
            
            // if (res.data.activityStatus == 1 || res.data.activityStatus == 2 || res.data.activityStatus == 4) {
            //   this.radio = 1
            // } else {
            //   this.radio = 0
            // }
            if (res.code == 0) {
              resolve(res.data)
            }
          }).catch((err) => {
            this.tableloading = false;
          })
      })
    },

 时间限制 这个8.64e7被减掉是因为需要选今天的日期时间

export default {
  data(){
    return {
         ...

         pickerOptions: {
             // 限制时间不让选择今天以前的
             disabledDate(time) {
             return time.getTime() < Date.now() - 8.64e7;
           },
         },

    }
  }
}

 

作为一个新手，写代码冗余很多，希望能帮助到各位，如有修改的地方，请指出，谢谢啦，第一次创作，还请大家多多鼓励。