Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期實(shí)現(xiàn)代碼
更新時(shí)間：2024年02月02日 10:18:08 作者：Lee?Chak?Shing
我們?cè)诰W(wǎng)頁(yè)開(kāi)發(fā)時(shí)通常需要用到一些日期組件來(lái)方便用戶選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期的相關(guān)資料,需要的朋友可以參考下
1. 需求介紹：
Element-UI的日期范圍選擇器，需要禁止用戶選擇未來(lái)日期，但往前的日期可任意選擇，舉例：今天是2023年6月2日，那么2023年6月3日及之后的日期都不能讓用戶點(diǎn)擊選擇
修改前效果：
目標(biāo)實(shí)現(xiàn)效果：
2.查閱文檔
發(fā)現(xiàn)里面有個(gè)picker-options屬性，我們給屬性添加規(guī)則即可
3.貼代碼
方便大家CV操作，confirmDate函數(shù)記得自己定義一下，不然會(huì)報(bào)錯(cuò)
<el-date-picker
style="margin-right: 18px;"
v-model="dateRange"
v-on:change="confirmDate"
type="daterange"
:clearable="false"
:picker-options="pickerOptions"
start-placeholder="開(kāi)始日期"
range-separator="至"
end-placeholder="結(jié)束日期">
</el-date-picker>// js部分
data() {
return {
dateRange: [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date()],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now(); // 禁用大于今天的日期
}
},
}
},4.查看效果
總結(jié)
到此這篇關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期的文章就介紹到這了,更多相關(guān)Element-UI日期選擇器禁用未來(lái)日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue觀察模式淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue之transition動(dòng)畫(huà)組件使用解讀
Vue.js中transition組件的基本用法和語(yǔ)法,包括常見(jiàn)的6個(gè)class切換,以及與動(dòng)畫(huà)插件（如animate.css、Velocity.js）的組合使用方法,文章還提到在處理多個(gè)元素、組件的過(guò)渡和列表的進(jìn)入/離開(kāi)過(guò)渡時(shí)需要注意的細(xì)節(jié)2026-01-01
這篇文章主要為大家詳細(xì)介紹了vue樹(shù)形控件tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明
這篇文章主要介紹了Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue項(xiàng)目中安裝less依賴的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文詳細(xì)介紹了從vue的組件傳值著手觀察者模式，感興趣的同學(xué)，可以參考下，理解其原理。2021-06-06
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10