日期选择器:限制最大范围3个月,超出的不可选,超出当前天也不可选
<el-form-item label="统计时间" prop="day_section"> <el-date-picker v-model="query.day_section" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" :picker-options="pickerOptions" @change="handleChange" /> </el-form-item>
data() { return { // 用户搜索关键字 query: { day_section: [] }, // 日期选择器做选择限定 startDate: '', pickerOptions: { // onPick:选中日期时的回调函数,在这里对选中的日期进行处理{maxDate:后选中日期;minDate:第一个选中的日期} onPick: ({ maxDate, minDate }) => { this.startDate = minDate && minDate.getTime() if (maxDate) { // 选中后一个时,要把第一个的赋值清空 this.startDate = '' } }, disabledDate: (time) => { // 选中第一个后,后一个前后3个月可选,超出的不可选,超出当前天也不可选,这里的月份按需求设定 const minTime = new Date(this.startDate).setMonth(new Date(this.startDate).getMonth() - 3) const maxTime = new Date(this.startDate).setMonth(new Date(this.startDate).getMonth() + 3) return time.getTime() > Date.now() || (this.startDate ? (time.getTime() < minTime || time.getTime() > maxTime) : false) } } } }
created() {
// 默认当前的前一个月 this.query.day_section = [ new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date(Date.now()) ] }