【element】】只用一个el-date-picker组件，限制选中时间的前后30天范围可选

Roottt_

已于 2023-06-20 14:50:04 修改

阅读量417

点赞数

文章标签： vue.js elementui 前端

于 2023-06-20 14:35:14 首次发布

本文链接：https://blog.csdn.net/weixin_43896125/article/details/131306285

版权

项目使用了Vue组件，设置为日期范围选择并限制只能选择30天内的时段，时间格式自动补全到时分秒。通过data中的expireTimeOptionFun函数动态管理选择的开始和结束时间，禁用超出30天范围的日期。

摘要由CSDN通过智能技术生成

项目需求是：只能选择30天内的时间
在这里插入图片描述标红外不可选
//项目时间格式需要时分秒自动补上

  <el-date-picker v-model="searchParams.times" type="daterange" range-separator="至"
 		start-placeholder="开始时间" end-placeholder="结束时间"  
     :default-time="['00:00:00', '23:59:59']" 
     :picker-options="expireTimeOption" value-format='yyyy-MM-dd HH:mm:ss'>
 </el-date-picker>

data:{
	return :{
		 expireTimeOption: this.expireTimeOptionFun(),
	}
}

主要逻辑

expireTimeOptionFun() {
     let selectData = []
     return {
         onPick: ({ maxDate, minDate }) => {
             selectData[0] = minDate?.getTime()
             selectData[1] = maxDate?.getTime()
         },
         disabledDate(time) {
             //选择时间
             if (selectData[0] && !selectData[1]) {
                 return time.getTime() > selectData[0] + 24*60*60*30*1000 || time.getTime() < selectData[0] - 24*60*60*30*1000
             }
         }
     }
 }