欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景

 更新時(shí)間:2023年08月19日 14:23:27   作者:卜是我的錯(cuò)  
這篇文章主要給大家介紹了關(guān)于element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景,一般在實(shí)際開(kāi)發(fā)場(chǎng)景中我們需要對(duì)時(shí)間選擇做一些限制,如不能選擇今天之前的時(shí)間、不能選擇今天以后的日期、限制日期不能大于開(kāi)始日期等等,需要的朋友可以參考下

組件代碼

<el-date-picker 
	v-model="timeVal" 
	value-format="yyyy/MM/dd"
	format="yyyy/MM/dd" 
	size="small" 
	:picker-options="pickerOptions" 
	type="daterange" 
	placeholder="自定義時(shí)間"  
	@change="onchangeTime" >
</el-date-picker>

場(chǎng)景1:設(shè)置選擇今天及今天之后的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },  
   }     
} 

在這里插入圖片描述

情景2: 設(shè)置選擇今天以及今天以前的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          }
        },  
   }     
}   

在這里插入圖片描述

情景3: 設(shè)置選擇三個(gè)月之內(nèi)到今天的日期

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
           	let curDate = (new Date()).getTime();
           	let three = 90 * 24 * 3600 * 1000;
          	let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;
          }
        },  
   }     
}   

情景4: 設(shè)置選擇最大范圍為30天

data (){
   return {
   	   pickerMinDate: null,
       pickerMaxDate: null,
       pickerOptions: {
	     onPick: ({ maxDate, minDate }) => {
	         if (minDate && this.pickerMinDate) {
	           this.pickerMinDate = null;
	         } else if (minDate) {
	           this.pickerMinDate = minDate.getTime();
	         }
	      },
          disabledDate: (time) => {
          	if (this.pickerMinDate) {
            	const day1 =  30 * 24 * 3600 * 1000
           		let maxTime = this.pickerMinDate + day1
            	let minTime = this.pickerMinDate - day1
            	return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()
          	} else {
            	return time.getTime() > Date.now()
          	}
       	  },
      },  
   }     
}   

在這里插入圖片描述

總結(jié) 

到此這篇關(guān)于element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景的文章就介紹到這了,更多相關(guān)element-ui日期選擇器限制范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論