el-date-picker 限制开始时间和结束时间的代码实现
作者:十一吖i
在Vue.js中使用Element UI库的el-date-picker组件时,可以通过设置picker-options来限制开始时间和结束时间的选择范围,下面通过例子介绍el-date-picker 限制开始时间和结束时间的实现,感兴趣的朋友一起看看吧
el-date-picker 限制开始时间和结束时间
需求:el-date-picker 月份限制开始时间和结束时间
开始时间:202307
结束时间:202407
代码实现
vue 页面
<el-form-item label="月份" prop="monthList"> <el-date-picker v-model="allForm.monthList" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" 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>
效果图
到此这篇关于el-date-picker 限制开始时间和结束时间的文章就介绍到这了,更多相关el-date-picker 限制时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!