ElementUI el-date-picker 限制选中日期前后30天,大于当天不可选
<template> <el-date-picker v-model="date" type="daterange" range-separator="—" align="right" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="onChangeDate"> </el-date-picker> </template> <script> export default { data() { return { pickerMinDate:'', date:[], pickerOptions:{ onPick: (obj) => { this.pickerMinDate = new Date(obj.minDate).getTime(); }, disabledDate:(time)=> { if (this.pickerMinDate) { const day1 = 30 * 24 * 3600 * 1000 let maxTime = this.pickerMinDate + day1 let minTime = this.pickerMinDate - day1 return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000 }else{ return time.getTime() > Date.now()+0 * 24 * 3600 * 1000 } } } }; }, created() { this.getSelectList(); }, computed: { }, methods: { onChangeDate(val) { this.params.StartDate = val[0]; this.params.EndDate = val[1]; if (val) { this.params.StartDate = val[0]; this.params.EndDate = val[1]; } else { let StartDate = this.$FormatTime("YYYY-mm-dd",new Date()); let EndTime = this.$FormatTime("YYYY-mm-dd",new Date()); let list = EndTime.split('-'); let EndDate = JSON.stringify((JSON.parse(list[0])+1))+'-'+list[1]+'-'+list[2]; this.params.StartDate = StartDate; this.params.EndDate = EndDate; } } } }; </script> <style lang="scss" scoped> </style>
Sometimes you need to applaud yourself