關於iview中得DatePicker 日期選擇器，開始時間不可以大於結束時間得限定
我們一般用日期選擇器得時候，會確定一個日期得範圍作為引數，但是一般我們都會忽略這個限制，從而導致了，出現上圖得問題，endTime居然可以小於startTime,很明顯是不符合專案需求得
檢視iview中關於DatePicker得api後，發現在options中可以定義自己需要得時間範圍，直接看程式碼
<FormItem label=""> <Row> <Col span="11"> <DatePicker type="date" placeholder="最新更新日期" @on-change = 'startChange' :options = 'startOptions' v-model="formItem.beginTime" ></DatePicker> </Col> <Col span="2" style="text-align: center">---</Col> <Col span="11"> <DatePicker type="date" placeholder="最後更新日期" :options="endOptions" @on-change = 'endChange' v-model="formItem.endTime" ></DatePicker> </Col> </Row> </FormItem>
下面是對於的options,直接看一下
startOptions: { disabledDate: (date) => { let data = this.formItem.endTime == '' ? Date.now() : this.formItem.endTime console.log('data', data) return date >= data } }, endOptions: { // 指定終止日期 disabledDate: (date) => { let data = this.formItem.beginTime == '' ? '' : this.formItem.beginTime return date >= Date.now() || date<data } },注意：這裡官方給出的例項是disabledDate(date){...},但是這樣子，在函式內部是不存在this，所以改為箭頭函式就可以獲取表單的資料，然後根據這個資料，做區間日期處理就可以了