el-date-picker?限制開(kāi)始時(shí)間和結(jié)束時(shí)間的代碼實(shí)現(xiàn)
el-date-picker 限制開(kāi)始時(shí)間和結(jié)束時(shí)間
需求:el-date-picker 月份限制開(kāi)始時(shí)間和結(jié)束時(shí)間
開(kāi)始時(shí)間:202307
結(jié)束時(shí)間:202407
代碼實(shí)現(xiàn)
vue 頁(yè)面
<el-form-item label="月份" prop="monthList">
<el-date-picker v-model="allForm.monthList" type="monthrange" range-separator="至" start-placeholder="開(kāi)始月份"
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)前月份的前一個(gè)月
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 限制開(kāi)始時(shí)間和結(jié)束時(shí)間的文章就介紹到這了,更多相關(guān)el-date-picker 限制時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
electron多標(biāo)簽頁(yè)模式更像客戶端的實(shí)現(xiàn)示例
本文主要介紹了electron多標(biāo)簽頁(yè)模式更像客戶端,通過(guò)創(chuàng)建和管理多個(gè)網(wǎng)頁(yè)視圖或使用現(xiàn)成組件來(lái)實(shí)現(xiàn)類(lèi)似Web瀏覽器的標(biāo)簽頁(yè)功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-11-11
解決select2在bootstrap modal中不能正常使用的問(wèn)題
今天小編就為大家分享一篇解決select2在bootstrap modal中不能正常使用的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript電子時(shí)鐘倒計(jì)時(shí)第二款
這篇文章主要介紹了JavaScript電子時(shí)鐘倒計(jì)時(shí)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-01-01

