element-ui 時間選擇器設定時間選擇範圍
針對element-ui時間選擇器進行時間選擇範圍的控制,最終實現的效果如下圖所示,灰色的區域為不能選擇區域!
<el-form-item label="日期:" prop="time">
<el-date-picker v-model="time" type="date" :picker-options="timeRange" placeholder="選擇日期"></el-date-picker>
</el-form-item>
export default {
data() {
return {
time:'',
startTime:'2020-10-20',
endTime:'2020-10-25'
timeRange:{
disabledDate:time => {
return time.getTime() < new Date(this.startTime).getTime()|| time.getTime() > new Date(this.endTime).getTime() ;
}
},
}
}
以上程式碼就可以實現2020-10-21至2020-10-25的日期選擇;如果需要包含開始時間當天,需要在減去一天;如下方程式碼
return time.getTime() < new Date(this.startTime).getTime()- 24 * 60 * 60 * 1000 || time.getTime() > new Date(this.endTime).getTime() ;
相關文章
- uniapp 周選擇範圍時間APP
- 直播帶貨原始碼,日期時間選擇器 選擇範圍限制原始碼
- element 時間選擇器禁止選擇以前的時間
- element日期選擇器,時間範圍設定為一週,vue中的寫法Vue
- 自定義時間選擇器
- dcat-admin 統計修改時間選擇器 日期範圍查詢
- vue 多時間段範圍選擇及回顯 元件封裝Vue元件封裝
- vue 手寫一個時間選擇器Vue
- React Native日期時間選擇元件React Native元件
- elementUI中日期選擇器,控制開始時間小於結束時間UI
- iOS仿滴滴預約用車時間選擇器iOS
- 小程式年月日時間段區間選擇
- layui laydate日期時間範圍,時間預設設定為23:59:59UI
- IOS之UIDatePicker實現時間日期選擇iOSUI
- jquery-weui時間選擇器datetimepicker只要年月日不要時間解決方案jQueryUI
- 為你的 Laravel Nova 新增時間範圍篩選Laravel
- ant-design date-picker 可以選擇當天,時間不能選擇過去的小時
- jQueryweui時間選擇器datetimepicker只要年月日解決方案jQueryUI
- 選擇代理IP,穩定時間和響應速度是關鍵
- 設計和編寫一個非同步通用Picker選擇器,用於時間日期、城市、商品分類的選擇非同步
- TCP 可靠傳輸的實現-02超時重傳時間的選擇/03選擇確認 SACKTCP
- python - 生成時間範圍Python
- 時間序列化資料庫選型?時序資料庫的選擇?資料庫
- Mysql時間欄位格式如何選擇,TIMESTAMP,DATETIME,INT?MySql
- jquery Mobiscroll日期時間選擇外掛使用 以及設定defaultValue屬性不起作用jQuery
- 微信小程式-選擇時間(一週的某一時刻)微信小程式
- JS判定一個給定的時間區間在哪些時間段範圍內JS
- cad選擇框不是矩形怎麼設定 cad選擇物件的時候不是矩形物件
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- JS判定一個給定的時間在某個時間範圍內JS
- [Flutter package]簡單好用好擴充套件的時間日期選擇器FlutterPackage套件
- 【新特性速遞】最佳化日期選擇器的時間皮膚
- Selenium4自動化測試6--控制元件獲取資料--下拉框級聯選擇、checkbox選擇、時間選擇器控制元件
- 何時選擇敏捷?敏捷
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- CSS 選擇器命名規範CSS
- Flutter 日期時間選擇類控制元件及國際化Flutter控制元件
- 程式設計師跳槽,到底選擇什麼時間辭職最合適?程式設計師