基于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?(!Object.is(this.endDate,?''))?{ return?time.getTime()?>?Date.now(this.endDate)?-?8.64e7?||?time.getTime()?>?new?Date(this.endDate).getTime()//?如果當天可選，就不用減8.64e7 }?else?{ return?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

轉載于:https://www.cnblogs.com/yearshar/p/11555157.html

總結

以上是生活随笔為你收集整理的element 日期控件 限制开始日期和结束日期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。