iview DatePicker添加表單驗證、初始化賦值、選擇器額外配置

<Form class="search_form" ref="searchForm" :rules="ruleInline" :model="formInline" label-position="right" :label-width="80">
	<FormItem prop="searchTime" label="查詢時間">
	    <DatePicker type="datetimerange" 
	        v-model="formInline.searchTime" 
	        format="yyyy-MM-dd HH:mm:ss"  
	        placeholder="請選擇查詢時間範圍" 
	        @on-change="getChange"
	        :transfer=true
	        :options="timeOptions"
	        style="width: 100%"></DatePicker>
	</FormItem>
	<FormItem class="btn_container">
        <div class="btn_save" @click="handleSubmit('searchForm')">查詢</div>
        <div class="btn_cancel" @click="handleReset('searchForm')">重置</div>
    </FormItem>
</Form>

data() {
    return{
        formInline: {
            searchTime: [],
            startTime: [],
            endTime: []
        },
        ruleInline: {
            searchTime: [{
                type: 'array',
                required: true,
                fields: {
                    0: {type: 'date', required: true, message: '請選擇查詢時間範圍'},
                    1: {type: 'date', required: true, message: '請選擇查詢時間範圍'}
                }
            }],
        },
        timeOptions:{
        	//設置不可選日期
        	disabledDate(date) {
                return date && date.valueOf() > new Date(new Date().toLocaleDateString());
            },
            //設置快捷選項
	        shortcuts: [
	            {
	                text: '今天',
	                value() {
	                    const start = new Date();
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            },
	            {
	                text: '昨天',
	                value() {
	                    const start = new Date(new Date().getTime() - 3600 * 1000 * 24);
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            },
	            {
	                text: '近3天',
	                value() {
	                    const start = new Date();
	                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            },
	            {
	                text: '近1周',
	                value() {
	                    const start = new Date();
	                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            },
	            {
	                text: '1個月',
	                value() {
	                    const start = new Date();
	                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            },
	            {
	                text: '3個月',
	                value() {
	                    const start = new Date();
	                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	                    start.setHours(0, 0, 0, 0);
	                    const end = new Date();
	                    end.setHours(23, 59, 59, 59);
	                    return [start, end];
	                }
	            }
	        ]
	    }
    }
},
mounted() {
    this.initData();
},
methods: {
	//提交
	handleSubmit (name) {
       this.$refs[name].validate((valid) => {
           if (valid) {
               this.searchLoading = true;
               this.formInline.startTime = this.msToDate(this.formInline.searchTime[0]);
               this.formInline.endTime = this.msToDate(this.formInline.searchTime[1]);
               //console.log(this.formInline);
               this.$Message.success('查詢成功');
               this.searchLoading = false;

               this.searchResult = 'person';
           } else {
               this.$Message.error('查詢時間不能爲空');
           }
       })
   },
   //重置
   handleReset (name) {
       this.$refs[name].resetFields();
       this.initData();
   },
   //選擇時間後觸發
   getChange (data){
       //console.log(data)
   },
   //初始化查詢時間
   initData (){
       var now = new Date();
       var endTime = this.msToDate(now);
       var startTime = this. msToDate(now.setDate(now.getDate() - 1));
       this.formInline.searchTime = [startTime, endTime];
       //console.log(this.formInline.searchTime)
   },
   //中國標準時間轉字符串YY:MM:DD HH:mm:ss
   msToDate(msec){
       let datetime = new Date(msec);
       let year = datetime.getFullYear();
       let month = datetime.getMonth() + 1;
       let date = datetime.getDate();
       let hour = datetime.getHours();
       let minute = datetime.getMinutes();
       let second = datetime.getSeconds();
       let result = year +
           '-' +
           ((month) < 10 ? '0' + month : month ) +
           '-' +
           ((date) < 10 ? '0' + date : date) +
           ' ' +
           ((hour) < 10 ? '0' + hour : hour) +
           ':' +
           ((minute) < 10 ? '0' + minute : minute) +
           ':' +
           ((second) < 10 ? '0' + second : second);
       return result;
   }
},