快捷導(dǎo)航

element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)

更新時(shí)間：2021年03月16日 09:35:19 作者：小炮兵快跑

這篇文章主要介紹了element中TimePicker時(shí)間選擇器禁用部分時(shí)間(顯示禁用到分鐘)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目需求是:選擇日期和時(shí)間,只能選擇當(dāng)前時(shí)間以后的時(shí)間,禁用最小級(jí)別到分鐘.

有兩種選擇
1.使用DateTimePicker 日期時(shí)間選擇器.
2.DatePicker 和 TimePicker 組合使用
這里我是用的是第二種方法,最主要的屬性是picker-options

<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>

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í)間開始為此刻的時(shí)分秒
      st = dt[1];
     }else{
      // 明天及以后從0時(shí)開始
      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í)間.

注意:這種邏輯雖然可以禁用秒的選擇,不過在前端頁面中秒的選擇是沒有禁用的,當(dāng)你選擇之前秒時(shí),會(huì)默認(rèn)顯示一分鐘之后的秒數(shù)(我是因業(yè)務(wù)要求,通過上述代碼你可以隨意調(diào)整禁用的時(shí)間段)

呈現(xiàn)效果:

在這里插入圖片描述

也把第一種方法總結(jié)一下吧
我禁用的日期是今天以前的，時(shí)間范圍是22：00到02：00,直接上代碼

<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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: