Element日期区间选择器限制选择范围
日期选择器:限制最大范围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()) ] }
声明:此资源由本博客收集整理,只用于记录心得和交流学习,请勿用作它途。如有侵权,请联系, 删除处理。如有不足或错误,欢迎指出和补充!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?