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