快捷導(dǎo)航

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

更新時(shí)間：2023年08月19日 14:23:27 作者：卜是我的錯(cuò)

這篇文章主要給大家介紹了關(guān)于element-ui時(shí)間日期選擇器限制選擇范圍的幾種場景,一般在實(shí)際開發(fā)場景中我們需要對時(shí)間選擇做一些限制,如不能選擇今天之前的時(shí)間、不能選擇今天以后的日期、限制日期不能大于開始日期等等,需要的朋友可以參考下

組件代碼

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

場景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í)間日期選擇器限制選擇范圍的幾種場景的文章就介紹到這了,更多相關(guān)element-ui日期選擇器限制范圍內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)表單驗(yàn)證小功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue3的二維碼組件vue3-next-qrcode
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作全解析
這篇文章主要為大家詳細(xì)介紹了Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-02-02
vue-video-player視頻播放器使用配置詳解
這篇文章主要為大家詳細(xì)介紹了vue-video-player視頻播放器的使用和配置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
詳解vue的Des加密解密
這篇文章主要為大家介紹了vue的Des加密解密使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue的異步組件加載的實(shí)現(xiàn)方法小結(jié)
在 Vue 中,異步組件是指那些在需要時(shí)才會被加載的組件,與傳統(tǒng)的靜態(tài)組件不同,異步組件通過動(dòng)態(tài)加載的方式,可以有效地減少初始加載的資源和時(shí)間,在 Vue 中實(shí)現(xiàn)異步組件加載非常簡單,開發(fā)者有多種方法可以做到,本文給大家介紹了一些常用的實(shí)現(xiàn)方法
2024-11-11
Vue3?全局實(shí)例上掛載屬性方法案例講解
這篇文章主要介紹了Vue3?全局實(shí)例上掛載屬性方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-05-05
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10