element-ui 日期选择器--禁用相关

动态禁用日期

<el-form-item label="合同终止时间" prop="contractEndDate">
<el-date-picker 
   v-model="addFrom.contractEndDate" 
   :clearable="false"
   :picker-options="pickerOptions" 
   value-format="yyyy-MM-dd HH:mm:ss"
   type="datetime" 
   placeholder="请选择合同结束时间" />
 </el-form-item>

  computed: {
    pickerOptions: function() {
      const _this = this
      return {
        disabledDate(time) {
          const licenseStart = new Date(_this.addFrom.contractStartDate)
          licenseStart.setDate(licenseStart.getDate() + 1)
          return time.getTime() < licenseStart.getTime()
        }
      }
    }
  },

只可选择此时此刻后面的日期

  <el-form-item label="上门服务时间" label-width="100px">
            <el-date-picker
              v-model="registerForm.onSiteServiceTime"
              :editable="false"
              type="datetime"
              :picker-options="pickerOptions"
              :clearable="false"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
 </el-form-item>

selectableRange: (() => {
          const data = new Date()
          const hour = data.getHours()
          const minute = data.getMinutes()
          const second = data.getSeconds()
          return [`${hour}:${minute}:${second} - 23:59:59`]
        })(),
        disabledDate(time) {
          var date = new Date()
          date.setFullYear(date.getFullYear() + 2)
          date.setDate(date.getDate() - 1)
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > date.getTime()
 }