今天就跟大家聊聊有关element-ui 时间选择器限制范围的实现，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联建站为客户提供专业的做网站、
成都网站设计、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、手机网站开发等网站方面业务。
方法：
考虑到有两种设计方式：
1、用两个独立时间选择器控制，实现起来比较混乱。
2、用日期范围选择器。
第一种方式没有做demo，有特殊需求的小伙伴请留言。这里选择使用日期范围选择器，使用起来可以预见代码会清爽很多。
效果图：
代码：
data() {
let _minTime = null
let _maxTime = null
return {
datePick: [new Date().format("yyyy-MM-dd") ,new Date().format("yyyy-MM-dd")], //默认选择当天，看个人需求
pickerOptions:{
onPick(time){
// 如果选择了只选择了一个时间
if (!time.maxDate) {
let timeRange = 6*24*60*60*1000 // 6天
_minTime = time.minDate.getTime() - timeRange // 最小时间
_maxTime = time.minDate.getTime() + timeRange // 大时间
// 如果选了两个时间，那就清空本次范围判断数据，以备重选
} else {
_minTime = _maxTime = null
}
},
disabledDate(time) {
// onPick后触发
// 该方法会轮询当3个月内的每一个日期，返回false表示该日期禁选
if(_minTime && _maxTime){
return time.getTime() < _minTime || time.getTime() > _maxTime
}
}
}
}
}看完上述内容，你们对element-ui 时间选择器限制范围的实现有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享名称：element-ui时间选择器限制范围的实现-创新互联
分享URL：
http://cdkjz.cn/article/ijjsi.html
