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)方便用戶(hù)選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期的相關(guān)資料,需要的朋友可以參考下
1. 需求介紹：
Element-UI的日期范圍選擇器，需要禁止用戶(hù)選擇未來(lái)日期，但往前的日期可任意選擇，舉例：今天是2023年6月2日，那么2023年6月3日及之后的日期都不能讓用戶(hù)點(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如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解Vue中$props、$attrs和$listeners的使用方法
本文主要介紹了Vue中$props、$attrs和$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
element-ui動(dòng)態(tài)添加表單項(xiàng)并實(shí)現(xiàn)事件觸發(fā)驗(yàn)證代碼示例
這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)添加表單項(xiàng)并實(shí)現(xiàn)事件觸發(fā)驗(yàn)證的相關(guān)資料,其實(shí)就是利用了vue的v-for循環(huán)渲染,通過(guò)添加數(shù)組實(shí)現(xiàn)動(dòng)態(tài)添加表單項(xiàng),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue3初始化如何調(diào)用函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
解決vue elementUI中table里數(shù)字、字母、中文混合排序問(wèn)題
這篇文章主要介紹了vue elementUI中table里數(shù)字、字母、中文混合排序問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06