項(xiàng)目需求是:選擇日期和時(shí)間,只能選擇當(dāng)前時(shí)間以后的時(shí)間,禁用最小級(jí)別到分鐘.
有兩種選擇
1.使用DateTimePicker 日期時(shí)間選擇器.
2.DatePicker 和 TimePicker 組合使用
這里我是用的是第二種方法,最主要的屬性是picker-options
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<el-date-picker v-model="formInline.inventoryDate" type="date" align="right" placeholder="請(qǐng)選擇日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDate" ></el-date-picker> <el-time-picker v-model="formInline.inventoryDateTime" type="date" align="right" placeholder="請(qǐng)選擇時(shí)間" :picker-options="{ selectableRange: this.startTimeRange }" @change="changeTime" value-format="HH:mm:ss" format="HH:mm:ss" ></el-time-picker> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
data(){ return{ pickerOptions: { disabledDate: time => { return time.getTime() < Date.now() - 3600 * 1000 * 24 }, }, }},watch: { 'formInline.inventoryDate':{ deep:true, handler(newValue, oldValue) { if(newValue){ let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+60*1000);// 一分鐘之后的時(shí)間(我是因業(yè)務(wù)要求,這里可以隨意調(diào)整時(shí)間) let dt = nowDate.split(" "); let st = ''; if(newValue.split(" ")[0] == dt[0]){ // 是今天,選擇 的時(shí)間開(kāi)始為此刻的時(shí)分秒 st = dt[1]; }else{ // 明天及以后從0時(shí)開(kāi)始 st = '00:00:00'; } this.startTimeRange = st + ' - 23:59:59'; //console.log(this.startTimeRange) //例如：如果今天此刻時(shí)間為10:41:40 則選擇時(shí)間范圍為： 11:41:40 - 23:59:59 //否則為：00:00:00- 23:59:59 } }, } }, |
思路:使用el-date-picker的picker-options屬性中的disabledDate配置項(xiàng),先禁用日期選擇器,使其只能選擇當(dāng)前日期之后的日期,然后用watch監(jiān)控日期選擇器所選日期如果是今天就使用el-time-picker的picker-options屬性中selectableRange配置項(xiàng),控制可選擇時(shí)間.
注意:這種邏輯雖然可以禁用秒的選擇,不過(guò)在前端頁(yè)面中秒的選擇是沒(méi)有禁用的,當(dāng)你選擇之前秒時(shí),會(huì)默認(rèn)顯示一分鐘之后的秒數(shù)(我是因業(yè)務(wù)要求,通過(guò)上述代碼你可以隨意調(diào)整禁用的時(shí)間段)
呈現(xiàn)效果:
也把第一種方法總結(jié)一下吧
我禁用的日期是今天以前的，時(shí)間范圍是22：00到02：00,直接上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<el-date-picker class="dateClass" v-model="aa" type="datetime" :picker-options="pickerOptions" placeholder="22點(diǎn)以后" style="width:100%"> </el-date-picker> data() { return { aa: '', pickerOptions: { // 限制時(shí)間 selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'],//這里也可以綁定個(gè)變量動(dòng)態(tài)限制時(shí)間 // 限制日期 disabledDate: this.disabledDate }, } } , methods: { disabledDate(time) { return time.getTime() < Date.now() - 3600 * 1000 * 24 }} |
到此這篇關(guān)于element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)的文章就介紹到這了,更多相關(guān)element TimePicker禁用部分時(shí)間內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_46995731/article/details/110038296
