Element-UI日期選擇器(選擇日期范圍)禁用未來日期實(shí)現(xiàn)代碼
更新時(shí)間：2024年02月02日 10:18:08 作者：Lee?Chak?Shing
我們在網(wǎng)頁開發(fā)時(shí)通常需要用到一些日期組件來方便用戶選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下
1. 需求介紹：
Element-UI的日期范圍選擇器，需要禁止用戶選擇未來日期，但往前的日期可任意選擇，舉例：今天是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ù)記得自己定義一下，不然會報(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="開始日期"
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日期選擇器(選擇日期范圍)禁用未來日期的文章就介紹到這了,更多相關(guān)Element-UI日期選擇器禁用未來日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue觀察模式淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js中transition組件的基本用法和語法,包括常見的6個(gè)class切換,以及與動畫插件（如animate.css、Velocity.js）的組合使用方法,文章還提到在處理多個(gè)元素、組件的過渡和列表的進(jìn)入/離開過渡時(shí)需要注意的細(xì)節(jié)2026-01-01
這篇文章主要為大家詳細(xì)介紹了vue樹形控件tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue 設(shè)置axios請求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請求格式為form-data的操作步驟，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Ant?Design?of?Vue的樹形控件Tree的使用及說明
這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue項(xiàng)目中安裝less依賴的過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文詳細(xì)介紹了從vue的組件傳值著手觀察者模式，感興趣的同學(xué)，可以參考下，理解其原理。2021-06-06
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10