iview 起始时间选择器、时间选择限制

1.起始截止时间约束

<template>
    <!-- 起始时间选择器 -->
    <div >
        <Form  ref="formInline" :model="searchForm" :label-width="70" inline>
            <Form-item label="开始日期" prop="from">          
            <DatePicker
            v-model="searchForm.from"
            @on-change="onSearchStartTimeChange"                    
            :options="searchStartTimeOption"
            type="date" 
            format="yyyy-MM-dd" 
            placeholder="请选择开始日期" 
            style="width: 150px;">
            </DatePicker>
            </Form-item>
            <Form-item label="截止日期" prop="to">          
            <DatePicker
           
            v-model="searchForm.to"
            :options="searchEndTimeOption"
            @on-change="onSearchEndTimeChange" 
            type="date" 
            format="yyyy-MM-dd" 
            placeholder="请选择截止日期" 
            style="width: 150px">
            </DatePicker>
            </Form-item>
         </Form>
    </div>
    
</template>

<script>
    export default {
        name: 'StartEnd',
        data() {
            return {
                searchForm: {
                    from: "",
                    to: ""
                },
            }
        },
        computed:{
         //设置不可选择的日期,option的disabledDate属性
            searchStartTimeOption(){
                return{
                        //date为从1970开始的日期
                        disabledDate:date=>{
                            let endTime  = new Date(this.searchForm.to).valueOf();
                                //若返回值为ture 则该日期处于禁用状态
                                return date && date.valueOf() >endTime;
                        }
                }
            },
            searchEndTimeOption(){
                return{
                        disabledDate:date=>{
                            //为了让结束日期可以选择当前开始日期，则减去一天的时间
                            let startTime  = new Date(this.searchForm.from).valueOf() -1*24*60*60*1000;
                                return date && date.valueOf() <startTime;
                        }
                }
            },     
        },
        methods:{
            onSearchStartTimeChange(e, type){
                this.searchForm.from = e;
                this.$emit('start',e);
            },
            onSearchEndTimeChange(e, type) { 
                this.searchForm.to = e;
                this.$emit('end',e);
            },
        }
    }
</script>

2.时间选择限制–只能选择现在和过去

<DatePicker
v-model="platForm.contractTime"
type="date" 
format="yyyy-MM-dd" 
placeholder="请选择时间" 
:options="options"
></DatePicker>


data(){
	return{
	options: {
          disabledDate (date) {
              return date && date.valueOf() >= Date.now();
          }
      },
	}
}

时间格式 yyyy-mm-dd

<DatePicker type="date" format="yyyy-MM-dd" @on-change="savePublishTime" :value="saveForm.publishTime" class="search"  placeholder="请选择发布时间"></DatePicker>

savePublishTime(e){
    this.saveForm.publishTime = e;
},