element 日期控件 限制開始日期和結束日期

基於element ui中的時間日期控件的開始日期和結束日期的限制用picker-options屬性， 當前日期時間器特有的選項。

代碼以下：

<el-form-item

                          label="開始日期"

                          label-width="90px"

                          prop="startDate">

                          <el-date-picker

                            v-model="statDate"

                            :picker-options="startDateOptions"

                            type="date"

                            clearable

                            style="width:140px"

                            value-format="yyyy-MM-dd"

                            placeholder="開始日期"/>

                        </el-form-item>

 

<el-form-item

                          label="結束日期"

                          label-width="90px"

                          prop="endDate">

                          <el-date-picker

                            v-model="endDate"

                            :picker-options="EndDateOptions"

                            type="date"

                            clearable

                            style="width:140px"

                            value-format="yyyy-MM-dd"

                            placeholder="結束日期"/>

                        </el-form-item>

 

 

 

export default{

data() {

    return {

　　　

 // 時間開始測試

      startDateOptions: {

        // console.log(time)

        disabledDate: (time) => {

          if (this.endDate) {             

　　　　　　return time.getTime() > Date.now(this.endDate) - 8.64e7 ||time.getTime() > new Date(this.endDate).getTime()  // 若是當天可選，就不用減8.64e7

          } else {

　　　　return time.getTime() < new Date(this.endDate).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now(this.endDate) - 8.64e7

          }

        }

      },

      // 時間結束測試

      EndDateOptions: {

        disabledDate: (time) => {

          return time.getTime() < new Date(this.statDate).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now(this.statDate) - 8.64e7 // 若是當天可選，就不用減8.64e7

        }

      },

 statDate: '',

        // 結束日期

        endDate: '',

        // 開始日期至結束日期

　

}

}

}

 

使用了es6的新特性中箭頭函數，箭頭函數至關於匿名函數，而且簡化了函數定義。箭頭函數有兩種格式，一種只包含一個表達式，省略掉了{ ... }和return。還有一種能夠包含多條語句，這時候就不能省略{ ... }和return