iview中日期选择器开始时间与结束时间联动,设置开始时间和结束时间约束

官网例子

<template>
    <Row>
        <Col span="12">
            <DatePicker type="date" :options="options3" placeholder="Select date" style="width: 200px"></DatePicker>
        </Col>
        <Col span="12">
            <DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                options3: {
                    disabledDate (date) {
                        //返回true就禁用，false就不禁用
                        //这里是禁用今天之前的日子，禁用昨天之前为2*24*60*60*1000，以此类推
                        return date && date.valueOf() < Date.now() - 1*24*60*60*1000;
                    }
                },
                options4: {
                    disabledDate (date) {
                       //date:当前时间，这里获取所有的日子
                        const disabledDay = date.getDate();
                        //返回true就禁用，false就不禁用,这里禁用所有月份的15号
                        return disabledDay === 15;
                    }
                }
            }
        }
    }
</script>

我的应用

template

        <Form inline ref="searchForm" :model="searchForm" :rules="searchRules">
          <FormItem prop="date">
            <DatePicker
              type="date"
              :options='startTimeOptions'
              placeholder="请选择开始时间"
              v-model="searchForm.startTime"
              @on-change="startTimeChange"
            ></DatePicker>
          </FormItem>
          <FormItem prop="date">
            <DatePicker
              type="date"
              :options = 'endTimeOptions'
              placeholder="请选择结束时间"
              v-model="searchForm.endTime"
              @on-change="endTimeChange"
            ></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="mySearch()">搜索</Button>
          </FormItem>
        </Form>

javascript

参考

<script>
export default {
  components: {},
  data() {
    return {
      searchForm: {
        startTime: null,
        endTime: null
      },
      //开始时间操作
      startTimeOptions:{},
      //结束时间操作
      endTimeOptions:{},
    }
  },
  methods:{
      startTimeChange:function(e){
          //设置开始时间
          console.log("startTime");
          console.log(this.searchForm.startTime);
          this.searchForm.startTime = e;
          this.endTimeOptions = {
              disabledDate:date =>{
                //   disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。
                  let startTime = this. searchForm.startTime ? new Date(this.searchForm.startTime).valueOf()  : '';
                  return date && (date.valueOf() < startTime)
              }
          }
      },
      endTimeChange:function(e){
          //设置结束时间
          console.log("endTime");
          console.log(this.searchForm.endTime);
          this.searchForm.endTime = e;
          let endTime = this.searchForm.endTime  ? new Date( this.searchForm.endTime ).valueOf()-1*24*60*60*1000 :'';
          this.startTimeOptions = {
              disabledDate:date =>{
                  return date && (date.valueOf() >endTime);
              }
          }
      }
  }
}
</script>