给大家分享下我最近项目遇到的问题，总结了下我遇到的问题，希望对大家有些帮助。先说说我要做的日期选择器的需求
1.范围选择，开始时间，结束时间
2.结束时间到开始时间不得大于90天
所以我首先想到的是日期范围选择器
<el-form-item label="有效期" prop="termOfValidity" class="labelTitle" label-width="150px">
<el-col :span="9">
<el-date-picker
v-model="addCouponForm.termOfValidity"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="expireTimeOption"
@change="selectRangeTime">
<!-- 使用expireTimeOption方法 -->
</el-date-picker><span class="explain_text">* 最长90天</span>
</el-col>
</el-form-item>
如果是必填项
别忘了在rules里面增加验证(记得在el-form-item上加上prop绑定才会生效)
termOfValidity: [
{ required: true, message: '请选择时间', trigger: 'change' }
],
大致样式就是这样
实现这些功能最好的方法就是禁用，把不符合条件的日期禁止用户去点击，引导用户，也防止用户乱点出问题
所以第一步：把当天之前的日期禁用掉(因为我要做的功能是设置活动时间范围，所以不能选择当日之前的日期)
需要通过这个来设置:picker-options="expireTimeOption"
这个要写在return里面
由于选完开始时间后，我才可以获取到90天以后的日期，所以这里需要用onPick拿到我选择的开始时间
所以我设置了两个变量来存储选中日期的值，记得在return里面初始化一下
expireTimeOption: {
onPick: ({maxDate,minDate}) => {
this.minDate=minDate;
this.maxDate=maxDate;
},
// 禁用当前日期之前的时间
disabledDate: time => { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
if(this.minDate){//当选择了开始时间，则禁用当日之前的日期，和开始时间+90以后的日期
return time.getTime() < Date.now()-24*60*60*1000 || time >new Date(this.minDate.getTime()+90*24*60*60*1000)
}
return time.getTime() < Date.now()-24*60*60*1000;
},
},
还需要做一个容错如果日期被清空了的话，需要重设下禁用条件 @change="selectRangeTime"
selectRangeTime(e){
// 如果时间被清空了，重置限定条件
if(e === null){
this.minDate = '';
this.maxDate = '';
this.expireTimeOption={
disabledDate: time => { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
if(this.minDate){
return time.getTime() < Date.now()-24*60*60*1000 || time > new Date(this.minDate.getTime()+90*24*60*60*1000)
}
return time.getTime() < Date.now()-24*60*60*1000;
},
}
}
},
虽然代码不是很多，但是写的过程遇到的困难还真是不少，也尝试了很多方法，走了很多弯路。可惜，做好了后，我们经理就是不满意，说什么用户怎么知道第一个选的日期是开始时间，还有就是要是单改某个日期怎么办，用户怕不都是傻子吧，非要我分成两个日期选择器来写，what，改？头给拧掉
可惜躲得了初一，躲不过十五呀，天天讲我做的不合理，开始又没给设计稿
<el-row>
<el-col :span="8">
<el-form-item prop="startTime">
<el-date-picker class="place_text" v-model="addCouponForm.startTime" :picker-options="pickerOptionsStart" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" @change="changeStart" @focus="focusStart"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1" class="middle_time">--</el-col>
<el-col :span="8">
<el-form-item prop="endTime">
<el-date-picker class="place_text" v-model="addCouponForm.endTime" :picker-options="pickerOptionsEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" @change="changeEnd" @focus="focusEnd"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<span class="explain_text">* 最长90天</span>
</el-col>
</el-row>
大致样式就是这样
用的还是:picker-options="xxx"，return里面别忘了加
pickerOptionsStart : this.beginDate(),//开始日期配置
pickerOptionsEnd : this.endDate(),//结束日期配置
这次方法统一写在methods里面
// 开始日期配置
beginDate() {
return {
disabledDate(time) {
if (this.addCouponForm.endTime) {
return time.getTime() > new Date(this.addCouponForm.endTime).getTime();
}else{//还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
return time.getTime() < Date.now() - 8.64e7;
}
}
}
},
// 结束日期配置
endDate() {
return {
disabledDate(time) {
if(this.addCouponForm.startTime){
return time.getTime() < new Date(this.addCouponForm.startTime).getTime() - 1*24*60*60*1000;//可以选择同一天
}
}
}
},
需要加一些方法容错
// 改变开始日期时
changeStart(){
// 当改变开始日期时，如果结束时间小于开始时间则清空结束日期
if(this.addCouponForm.startTime > this.addCouponForm.endTime){
this.addCouponForm.endTime='';
}
},
//打开结束日期时
focusEnd(){
// 如果直接选择结束日期(此时还没选择开始日期) 则在这之前应该先禁用当天之前的日期
this.pickerOptionsEnd={
disabledDate: time => {
if(!this.addCouponForm.startTime){
return time.getTime() < Date.now() - 8.64e7;
}else{
return time.getTime() < new Date(this.addCouponForm.startTime).getTime() - 1*24*60*60*1000;
}
}
}
},
//打开开始日期时
focusStart: function (){
// 再次点击开始时间时禁用当日之前的日期
this.pickerOptionsStart={
disabledDate: time => {
return time.getTime() < Date.now() - 8.64e7;
}
}
},
至于判断开始时间和结束时间之间是否超过90天，我也想过用上面第一种方法把超过90天的日期给禁用，开始试了很多次也不生效，所以我直接在提交表单的时候做了个判断，我这个人比较较真，后来想想觉得方法没错但是不知道怎么就是实现不了所以又试了下
我是想在点击开始时间的时候，拿到开始时间日期，然后禁用结束时间里90天以后的日期，但是发现怎么都不生效，后来发现根本没执行这个方法(我打印的ccc是我选择开始日期后计算出来它90天之后的日期)
我点击的时候页面上并没有打印0000和5555也就是说并没有执行到这一步
试了几次大概明白了规律就是，在开始时间的操作里面无论是change还是focus都只能操作this.pickerOptionsStart(开始日期配置),同理结束时间也一样，所以我想到了在打开结束时间的时候禁用90天以后的日期就成功了，哈哈
// 打开结束时间
focusEnd(){
console.log('focusEnd');
// 如果直接选择结束日期(此时还没选择开始日期) 则在这之前应该先禁用当天之前的日期
this.pickerOptionsEnd={
disabledDate: time => {
if(!this.addCouponForm.startTime){
return time.getTime() < Date.now() - 8.64e7;
}else{//打开时候禁用90天以后的日期
return time.getTime() < new Date(this.addCouponForm.startTime).getTime() - 1*24*60*60*1000 || time >(new Date(this.addCouponForm.startTime).getTime()+90*24*60*60*1000);
}
}
}
},
写的不好的地方欢迎大家留言批评，我看到后也会尽快改正，谢谢！
其实改起来并不难，但是我可能就是比较排斥这种功能实现了才让说要那样写，所以改起来也多花了点时间。之前参考了很多大神给的例子，因为看的也比较多，现在就不一一找了，感谢！
也给正在找工作的前端朋友一些建议，尽量还是别找不带UI设计的公司，因为太麻烦了，很多任务分配给你的时候说什么看着做，样式不作要求，或者让你仿照着写，结果一模一样非说不满意，或者就是跟你讲你先做，做好了给我看看我再说怎么改，总之就是改来改去，加油！冲啊！
