el-date-picker 限制开始时间和结束时间
需求：el-date-picker 月份限制开始时间和结束时间
开始时间：202307
结束时间：202407
代码实现
vue 页面
javascript
<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
javascript
<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>效果图
