iview DatePicker 时间范围设置不可选日期 可以选择当天

iview中 
设置属性 options 对象中的 disabledDate 可以设置不可选择的日期

怎么做？

上一篇文章其实 已经介绍了  直接把代码放到工程中  运行一下 你就能看懂

主要是判断disabledDate 值的判断  

如果可以选择当天   这个判断该怎么写   我也是网上找到的  来这里记一笔  以后忘了 翻出来看看

                <DatePicker
                style="width: 400px"
                  type="date"
                  :confirm="true"
                  placeholder="请输入终止时间"
                  :value="appindexData.endHeight"
                  :options="endTimeOptions"
                  @on-open-change="endTimeOpen"
                  @on-change="appindexData.endHeight=$event"
                ></DatePicker>

上面 options="endTimeOptions  这个值判断内容在这里面写  return出来就ok

data同级目录

watch: {
    // 结束时间范围
    'appindexData.stratHeight': function (e) {
      
      this.endTimeOptions = {
        disabledDate: date => {
          // return date && date.valueOf() < new Date(this.appindexData.stratHeight).getTime()
          // 设置结束日期 可以选择开始日期当天的日期
            let startTime = "";
            //获取当前e对应的日期 xxxx/xx/xx
            let curD = new Date(e).toLocaleDateString();
          if (new Date(curD).valueOf() < new Date(e).valueOf()) {            
                //86400000 = 1 * 24 * 60 * 60 * 1000 是一天(24小时)的毫秒数
                startTime = e ? new Date(e).valueOf() - 86400000  : "";
            } else {
              startTime = e ? new Date(e).valueOf() : "";
            }
            return date && date.valueOf() < startTime;
        }
      }
    }
  },

如果 你想不能选择当天的 可以这样判断   比如 你选择2019-12-10  接下来只能选择2019-12-11和以后的日期  那就这样一句话判断就可以了。当然你也可以在网上找一下  大神也很多

return date && date.valueOf() < new Date(this.appindexData.stratHeight).getTime()-86400000

好介绍就介绍完了  

 

我把全部代码上传上来  方便小白直接复制粘贴可以跑一跑  熟悉熟悉

<template>
  <div class="API-table">
            <Form
              ref="formRef"
              :model="appindexData"
              :rules="rules"
            >
              <FormItem prop="stratHeight">
                <DatePicker
                style="width: 400px"
                  type="date"
                  :confirm="true"
                  placeholder="请输入起始时间"
                  :value="appindexData.stratHeight"
                  :options="startTimeOptions"
                  @on-ok="startTimeChoose"
                  
                  @on-change="appindexData.stratHeight=$event"
                  
                ></DatePicker>
              </FormItem>

              <p>终止时间</p>
              <FormItem prop="endHeight">
                <DatePicker
                style="width: 400px"
                  type="date"
                  :confirm="true"
                  placeholder="请输入终止时间"
                  :value="appindexData.endHeight"
                  :options="endTimeOptions"
                  @on-open-change="endTimeOpen"
                  @on-change="appindexData.endHeight=$event"
                ></DatePicker>
              </FormItem>
            </Form>

  </div>
</template>
<script>
export default {
  data() {
    return {
      
      startTimeOptions: {
        //限制日期前以前的不可选择
        // disabledDate: date => {
        //   return date && date.valueOf() < Date.now() - 86400000;
        // }
      },
      endTimeOptions: {},
      rules: {
        stratHeight: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endHeight: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ]
      },
      
     
      appindexData: {
        stratHeight: "",
        endHeight: "",
        
      }
    };
  },
  mounted() {
   
  },
  watch: {
    // 结束时间范围
    'appindexData.stratHeight': function (e) {
      
      this.endTimeOptions = {
        disabledDate: date => {
          // return date && date.valueOf() < new Date(this.appindexData.stratHeight).getTime()-86400000
          // 设置结束日期 可以选择开始日期当天的日期
            let startTime = "";
            //获取当前e对应的日期 xxxx/xx/xx
            let curD = new Date(e).toLocaleDateString();
          if (new Date(curD).valueOf() < new Date(e).valueOf()) {            
                //86400000 = 1 * 24 * 60 * 60 * 1000 是一天(24小时)的毫秒数
                startTime = e ? new Date(e).valueOf() - 86400000  : "";
            } else {
              startTime = e ? new Date(e).valueOf() : "";
            }
            return date && date.valueOf() < startTime;
        }
      }
    }
  },

  methods: {
    startTimeChoose () {
      if (new Date(this.appindexData.stratHeight) - new Date(this.appindexData.endHeight) > 0) {
        this.$Message.warning('开始时间早于结束数时间')
        this.appindexData.stratHeight = ''
      }
    },
    // 结束时间验证
    endTimeOpen () {
      if (!this.appindexData.stratHeight) {
        this.$Message.warning('请先选择开始时间')
        this.appindexData.endHeight = ''
      }
    }, 
 
  }
};
</script>
<style scoped>

</style>