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() ;
相關文章
- 直播帶貨原始碼,日期時間選擇器 選擇範圍限制原始碼
- element日期選擇器,時間範圍設定為一週,vue中的寫法Vue
- 自定義時間選擇器
- uniapp 周選擇範圍時間APP
- BootStrapDatePicker時間選擇器--TangobootGo
- iOS簡易時間選擇器iOS
- dcat-admin 統計修改時間選擇器 日期範圍查詢
- vue 多時間段範圍選擇及回顯 元件封裝Vue元件封裝
- 時間選擇外掛ClockPickerKPI
- vue 手寫一個時間選擇器Vue
- AngularJS教程十六—— 時間選擇AngularJS
- 移動端時間選擇器(更新 1.2.0 版本)
- elementUI中日期選擇器,控制開始時間小於結束時間UI
- React Native日期時間選擇元件React Native元件
- iOS仿滴滴預約用車時間選擇器iOS
- 小程式年月日時間段區間選擇
- 【MySQL】時間型別儲存格式選擇MySql型別
- layui laydate日期時間範圍,時間預設設定為23:59:59UI
- 為你的 Laravel Nova 新增時間範圍篩選Laravel
- Android View 自定義 RangeSeekBar 範圍選擇器AndroidView
- ant-design date-picker 可以選擇當天,時間不能選擇過去的小時
- 選擇代理IP,穩定時間和響應速度是關鍵
- 微信小程式-選擇時間(一週的某一時刻)微信小程式
- jquery-weui時間選擇器datetimepicker只要年月日不要時間解決方案jQueryUI
- TCP 可靠傳輸的實現-02超時重傳時間的選擇/03選擇確認 SACKTCP
- 設計和編寫一個非同步通用Picker選擇器,用於時間日期、城市、商品分類的選擇非同步
- 時間序列化資料庫選型?時序資料庫的選擇?資料庫
- 關於My97DatePicker時間外掛選擇周的時間格式
- IOS之UIDatePicker實現時間日期選擇iOSUI
- angular 實現一週選擇時間段外掛Angular
- jquery Mobiscroll日期時間選擇外掛使用 以及設定defaultValue屬性不起作用jQuery
- 何時選擇敏捷?敏捷
- JS判定一個給定的時間區間在哪些時間段範圍內JS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- jQueryweui時間選擇器datetimepicker只要年月日解決方案jQueryUI
- [Flutter package]簡單好用好擴充套件的時間日期選擇器FlutterPackage套件
- 【新特性速遞】最佳化日期選擇器的時間皮膚
- Kibana或Grafana,時間序列視覺化如何選擇?Grafana視覺化