详解element-ui动态限定的日期范围选择器代码片段
何开此题
我是一个码农，缘起就是这次需求遇到了之前实现过的功能细节，不想再从头翻组件文档实现一遍，最好是直接拷贝粘贴。
细节
picker-options设定规则：时间范围最大可选择30天,最晚时间为今天。
element-ui的日期选择器的组件是el-date-picker.
设定pickerOptions2，
data(){
return{
pickerOptions2:{
disabledDate:theDate=>{
constoneDay=3600*1000*24
constcurrent=theDate.getTime()
constnow=Date.now()
constcondition1=current>now
if(!this.minDateTimestamp)returncondition1
constpickerRangeNum=30
//时间范围最大可选择30天,最晚时间为今天
constlastMonthBegin=this.minDateTimestamp
constlastMonthEnd=lastMonthBegin+pickerRangeNum*oneDay
return(
condition1||currentlastMonthEnd
)
},
onPick:({maxDate,minDate})=>{
this.minDateTimestamp=minDate.getTime()
if(maxDate){
this.minDateTimestamp=0
}
},
},
}
},
模板的设定，
总结
element-ui动态限定的日期范围选择器，再回首，不用愁。
到此这篇关于element-ui动态限定的日期范围选择器代码片段的文章就介绍到这了,更多相关element-ui动态限定的日期范围选择器代码片段内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。