el-date-picker?限制開始時間和結(jié)束時間的代碼實現(xiàn)
更新時間:2024年08月10日 14:21:23 作者:十一吖i
在Vue.js中使用Element?UI庫的el-date-picker組件時,可以通過設(shè)置picker-options來限制開始時間和結(jié)束時間的選擇范圍,下面通過例子介紹el-date-picker?限制開始時間和結(jié)束時間的實現(xiàn),感興趣的朋友一起看看吧
el-date-picker 限制開始時間和結(jié)束時間
需求:el-date-picker 月份限制開始時間和結(jié)束時間
開始時間:202307
結(jié)束時間:202407
代碼實現(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() // 去年當前月份的前一個月 const startYear = year - 1 const startMonth = month === 0 ? 11 : month - 1 const startDate = new Date(startYear, startMonth, 1) // 當前月份的前一月 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)文章
electron多標簽頁模式更像客戶端的實現(xiàn)示例
本文主要介紹了electron多標簽頁模式更像客戶端,通過創(chuàng)建和管理多個網(wǎng)頁視圖或使用現(xiàn)成組件來實現(xiàn)類似Web瀏覽器的標簽頁功能,具有一定的參考價值,感興趣的可以了解一下2024-11-11解決select2在bootstrap modal中不能正常使用的問題
今天小編就為大家分享一篇解決select2在bootstrap modal中不能正常使用的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08