el-date-picker 如何限制选择六个月内的日期
效果如图:
代码:
<el-date-picker v-model="serchTimes" type="daterange" size="small" start-placeholder="开始时间" range-separator="~" end-placeholder="结束时间" format="yyyy / MM / dd " :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="changeTime" :default-time="['00:00:00', '23:59:59']" :unlink-panels="true" :validate-event="false" :clearable="false"> </el-date-picker>
主要::picker-options=“pickerOptions” 中的配置:
在onPick配置项中可以获取到点击时的时间,将其转换为时间戳后存储起来。
在disabledDate配置项中配置只能选择前后6个月,这个配置项的参数是当前的日期,返回参数要求是Boolean值
其他属性解析:format="yyyy / MM / dd ": 选择后显示的样式
default-time 是因为需要默认的时分秒才添加的
value-format 是点击确认后,change事件中能获取到的数据格式,
:unlink-panels=“true” 是取消两个面板之间的联动滚动
:validate-event=“false” 取消点击时的校验,按需写
:clearable=“false” 取消清除功能 ,按需写
data(){ return{ serchTimes: '', selectData: '', pickerOptions: { onPick: ({ maxDate, minDate }) => { this.selectData = maxDate ? maxDate.getTime() : minDate ? minDate.getTime() : '' if (!maxDate || !minDate) { this.serchTimes = '' //只选一个的时候,日期置空 } }, }, disabledDate: (time) => { if (this.selectData) { const curDate = this.selectData; const three = 183 * 24 * 3600 * 1000;// 6个月 const threeMonthsAfter = curDate + three; // 开始时间+6个月 const threeMonthsBefore = curDate - three; //开始时间-6个月 return time.getTime() > threeMonthsAfter || time.getTime() < threeMonthsBefore; } } }, } }, methods:{ //选择时间后的处理函数了,可以把数据保存后发送接口等等操作 changeTime() { if (this.serchTimes) { this.reloadForm.begAbsTime = this.serchTimes[0] this.reloadForm.endAbsTime = this.serchTimes[1] } }, }
到此这篇关于el-date-picker 限制选择六个月内的日期的文章就介绍到这了,更多相关el-date-picker 限制选择日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
这篇文章主要介绍了JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法,其实就是利用JS检测div的名称和样式名称实现,需要的朋友可以参考下2014-11-11javascript 使用for循环时该注意的问题-附问题总结
所谓for循环就是重复的执行一段代码,for循环也是希望在创建循环时常会用到的工具,这篇内容主要给大家介绍javascript 使用for循环时该注意的问题-附问题总结,需要的朋友可以参考下2015-08-08JS中getElementsByClassName与classList兼容性问题解决方案分析
这篇文章主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下2019-08-08dtree 网页树状菜单及传递对象集合到js内,动态生成节点
最近要做一个联系人的选择框,选择联系人后,将联系人的手机号添加到网页的输入框,可以支持复选框2012-04-04
最新评论