Element Ui 日期選擇器 范圍限制 + value-format

Element Ui 日期選擇器 范圍限制

一個日期范圍

 

// el-date-picker
<el-date-picker
       v-model="value"
       type="date" 
       placeholder="選擇日期"
       :picker-options="pickerOptions"> //
</el-date-picker>

    // 選擇 今天或以后的日期(不包含今天則去掉下面 - 8.64e7）
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
       },  
    // 選擇 今天或以前的日期(不包含今天則去掉下面 - 8.64e6）
    pickerOptions: {
         disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
       }

 

兩個日期范圍

 

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="開始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="結束日期"
       :picker-options="pickerOptions1">
</el-date-picker>

// 結束日期不能大於開始日期,可以為今天
// 注: 結束時間最大只能為今天，開始時間只能小於或等於結束時間，
// 如果開始時間為今天，結束時間只能為今天
  pickerOptions0: {
     disabledDate: (time) => {
       if (this.value2) {
         return time.getTime() > Date.now() || time.getTime() > this.value2;
       } else {
            return time.getTime() > Date.now();
        }
      }
   },
   pickerOptions1: {
      disabledDate: (time) => {
         return time.getTime() < this.value1 || time.getTime() > Date.now();
      }
   }
  // 在我們項目中用的最多的是這種
  // 結束日期不能大於開始日期,可以為今天
  // 先開始時間，判斷為今天或以前，在結束時間，則結束時間大於等於開始時間
  // 先結束時間，判斷為今天或以后，在開始時間，則開始時間小於等於結束時間
  pickerOptions0: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() > this.value2
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
  pickerOptions1: {
        disabledDate: (time) => {
            if (this.value2) {
              return time.getTime() < this.value1
            }
            return time.getTime() < Date.now()
          }
        }

 

value-format

 

value-format屬性是改變v-model上值的格式
value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000
我們最后獲取的值都是要傳給后台的，所以，我們需要value-format這個屬性
假如后台需要的是是 2018-12-27 格式
添加 value-format="yyyy-MM-dd"
會發現驗證里加了v-model值的驗證都無效了
其實很好解決，判斷的依據是13位的時間戳，所以我們需要把驗證里的v-model的值替換成13時間戳就可以了.當然你也可以改為 value-format=“timestamp” 也行（這需要考慮之后傳值的轉換）

在這推薦一個插件 moment，一個操作時間的插件，有興趣可以去了解一下