技術標籤：elementuivue.js前端

前端開發過程中經常用到DatePicker日期選擇器設定開始日期和結束日期，一般情況下開始時間不能大於結束時間。

form表單中的開始日期和結束日期渲染如下程式碼所示：

 <el-form-item label="開始日期" prop="startTime">
                <el-date-picker
                  v-model="insertForm.startTime"
                  type="date"
                  placeholder="選擇開始日期"
                  :picker-options="editStartOptions"
                ></el-date-picker>
 </el-form-item>
 <el-form-item label="結束日期" prop="endTime">
                <el-date-picker
                  v-model="insertForm.endTime"
                  type="date"
                  placeholder="選擇結束日期"
                  :picker-options="editStopOptions"
                ></el-date-picker>
 </el-form-item>
 

使用picker--options屬性設定如果選擇了開始日期，再選擇結束日期時，則結束日期下拉框中比開始日期小的日期禁止選擇；如果先選擇結束日期，再選擇開始日期時，則開始日期下拉框中比結束日期大的日期禁止選擇。

實現效果如下所示：

日期的校驗程式碼如下：

data(){

 return{

   rules:{
            startTime: [
          {
            required: true,
            message: "請選擇開始時間",
            trigger: ["blur", "change"]
          }
        ],
        endTime: [
          {
            required: true,
            message: "請選擇結束時間",
            trigger: ["blur", "change"]
          }
        ]
    }
   
    editStartOptions: {
        disabledDate: time => {
          if (!this.insertForm.endTime) {
            return time.getTime() < new Date(1970 - 1 - 1).getTime();   //禁止選擇1970年以前的日期
          } else {
            return time.getTime() > new Date(this.insertForm.endTime);
          }
        }
      },
      editStopOptions: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.insertForm.startTime) ||
            time.getTime() < new Date(1970 - 1 - 1).getTime()    //禁止選擇1970年以前的日期
          );
        }
      },
 }
}