1. 程式人生 > >vue+elementUI 關於日期選擇器的disabledDate問題

vue+elementUI 關於日期選擇器的disabledDate問題

關於結束時間不能大於開始時間的問題,在elementui裡我們用官方提供的 disabledDate 選項來解決。 
HTML:給選擇器加上:picker-options屬性

//開始時間
<el-date-picker v-model="startDate"></el-date-picker>
//截止時間
<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>
  • 1
  • 2
  • 3
  • 4

DATA: 
我這裡就簡略寫下關鍵的。

data() {
    return {
        startDate
: null, endDate: null, endDateOpt: { disabledData: (time) => { return time.getTime() < this.startDate; } } } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

以上是單個選擇框的,如果是daterange或datetimerange的話:

<el-date-picker v-model="value1" type="daterange" 
    :picker-options
="pickerOptions"> </el-date-picker>
  • 1
  • 2
  • 3
data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}
問題: (html5)element UI 的datePicker 怎麼限制輸入的範圍呢?

描述:

1.element UI的datePicker 怎麼確定日期的選擇範圍內,向後臺的資料需要限制在某一段日期範圍內,在element Ui 的日期範圍內

解決方案1:
pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
disabledDate: (time) => {
    let beginDateVal = this.addJobForm.beginDate;
    if (beginDateVal) {
        return time.getTime() < beginDateVal;
    }
}
解決方案2:

http://element.eleme.io/#/zh-...
http://jsfiddle.net/api/post/...

設定picker-options的disabledDate,返回true被禁用。
涉及到具體的專案,這種問題最好到GitHub上去問。