el-date-picker?限制開始時間和結(jié)束時間的代碼實(shí)現(xiàn)
el-date-picker 限制開始時間和結(jié)束時間
需求:el-date-picker 月份限制開始時間和結(jié)束時間
開始時間:202307
結(jié)束時間:202407
代碼實(shí)現(xiàn)
vue 頁面
<el-form-item label="月份" prop="monthList">
<el-date-picker v-model="allForm.monthList" type="monthrange" range-separator="至" start-placeholder="開始月份"
end-placeholder="結(jié)束月份" value-format="yyyy-MM" :picker-options="pickerOptions">
</el-date-picker>
</el-form-item>script
<script>
export default {
data() {
return {
allForm: {},
allRules: {
monthList: [
{ required: true, message: "日期不能為空", trigger: "blur" }
]
},
pickerOptions: {
disabledDate(time) {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth()
// 去年當(dāng)前月份的前一個月
const startYear = year - 1
const startMonth = month === 0 ? 11 : month - 1
const startDate = new Date(startYear, startMonth, 1)
// 當(dāng)前月份的前一月
const endYear = year
const endMonth = month === 0 ? 11 : month - 1
const endDate = new Date(endYear, endMonth, 1)
return (
time.getTime() < startDate.getTime() || time.getTime() > endDate.getTime()
)
}
}
}
}
}
</script>效果圖

到此這篇關(guān)于el-date-picker 限制開始時間和結(jié)束時間的文章就介紹到這了,更多相關(guān)el-date-picker 限制時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js使用setTimeout實(shí)現(xiàn)定時炸彈的方法
這篇文章主要介紹了js使用setTimeout實(shí)現(xiàn)定時炸彈的方法,涉及javascript中setTimeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
基于JavaScript FileReader上傳圖片顯示本地鏈接
這篇文章主要為大家詳細(xì)介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05
JavaScript監(jiān)測ActiveX控件是否已經(jīng)安裝過的代碼
這是通用的方法,只需要把唯一的Activex的clsid和任意一個屬性或方法名傳進(jìn)來就可以判斷了。(找了兩個小時才找到 -_-!)2008-09-09
js動態(tài)生成表格(節(jié)點(diǎn)操作)
這篇文章主要為大家詳細(xì)介紹了js動態(tài)生成表格,進(jìn)行節(jié)點(diǎn)操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-01-01
詳解javascript實(shí)現(xiàn)瀑布流絕對式布局
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流的兩種布局方式,一是絕對式布局、二是列式布局,詳細(xì)介紹了這兩種布局方式的原理,感興趣的小伙伴們可以參考一下2016-01-01
微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)詳解
uni-app是一個使用Vue.js 開發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08

