給大家分享下我最近項(xiàng)目遇到的問題，總結(jié)了下我遇到的問題谅将，希望對大家有些幫助姑子。先說說我要做的日期選擇器的需求
1.范圍選擇，開始時間肠阱，結(jié)束時間
2.結(jié)束時間到開始時間不得大于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="結(jié)束日期"
:picker-options="expireTimeOption"
@change="selectRangeTime">
<!-- 使用expireTimeOption方法 -->
</el-date-picker><span class="explain_text">* 最長90天</span>
</el-col>
</el-form-item>
如果是必填項(xiàng)
別忘了在rules里面增加驗(yàn)證(記得在el-form-item上加上prop綁定才會生效)
termOfValidity: [
{ required: true, message: '請選擇時間', trigger: 'change' }
],
大致樣式就是這樣
實(shí)現(xiàn)這些功能最好的方法就是禁用票唆，把不符合條件的日期禁止用戶去點(diǎn)擊，引導(dǎo)用戶屹徘，也防止用戶亂點(diǎn)出問題
所以第一步：把當(dāng)天之前的日期禁用掉(因?yàn)槲乙龅墓δ苁窃O(shè)置活動時間范圍走趋，所以不能選擇當(dāng)日之前的日期)
需要通過這個來設(shè)置:picker-options="expireTimeOption"
這個要寫在return里面
由于選完開始時間后，我才可以獲取到90天以后的日期噪伊，所以這里需要用onPick拿到我選擇的開始時間
所以我設(shè)置了兩個變量來存儲選中日期的值簿煌，記得在return里面初始化一下
expireTimeOption: {
onPick: ({maxDate,minDate}) => {
this.minDate=minDate;
this.maxDate=maxDate;
},
// 禁用當(dāng)前日期之前的時間
disabledDate: time => { //disabledDate 文檔上：設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期鉴吹，要求返回 Boolean
if(this.minDate){//當(dāng)選擇了開始時間姨伟，則禁用當(dāng)日之前的日期，和開始時間+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;
},
},
還需要做一個容錯如果日期被清空了的話豆励，需要重設(shè)下禁用條件 @change="selectRangeTime"
selectRangeTime(e){
// 如果時間被清空了夺荒，重置限定條件
if(e === null){
this.minDate = '';
this.maxDate = '';
this.expireTimeOption={
disabledDate: time => { //disabledDate 文檔上：設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期良蒸，要求返回 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;
},
}
}
},
雖然代碼不是很多技扼，但是寫的過程遇到的困難還真是不少，也嘗試了很多方法诚啃，走了很多彎路淮摔。可惜始赎，做好了后和橙，我們經(jīng)理就是不滿意，說什么用戶怎么知道第一個選的日期是開始時間造垛，還有就是要是單改某個日期怎么辦魔招，用戶怕不都是傻子吧，非要我分成兩個日期選擇器來寫五辽，what办斑，改？頭給擰掉
可惜躲得了初一，躲不過十五呀乡翅，天天講我做的不合理鳞疲，開始又沒給設(shè)計(jì)稿
<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="結(jié)束日期" @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(),//結(jié)束日期配置
這次方法統(tǒng)一寫在methods里面
// 開始日期配置
beginDate() {
return {
disabledDate(time) {
if (this.addCouponForm.endTime) {
return time.getTime() > new Date(this.addCouponForm.endTime).getTime();
}else{//還沒有選擇結(jié)束時間的時候蠕蚜，讓他只能選擇今天之后的時間包括今天
return time.getTime() < Date.now() - 8.64e7;
}
}
}
},
// 結(jié)束日期配置
endDate() {
return {
disabledDate(time) {
if(this.addCouponForm.startTime){
return time.getTime() < new Date(this.addCouponForm.startTime).getTime() - 1*24*60*60*1000;//可以選擇同一天
}
}
}
},
需要加一些方法容錯
// 改變開始日期時
changeStart(){
// 當(dāng)改變開始日期時尚洽，如果結(jié)束時間小于開始時間則清空結(jié)束日期
if(this.addCouponForm.startTime > this.addCouponForm.endTime){
this.addCouponForm.endTime='';
}
},
//打開結(jié)束日期時
focusEnd(){
// 如果直接選擇結(jié)束日期(此時還沒選擇開始日期) 則在這之前應(yīng)該先禁用當(dāng)天之前的日期
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 (){
// 再次點(diǎn)擊開始時間時禁用當(dāng)日之前的日期
this.pickerOptionsStart={
disabledDate: time => {
return time.getTime() < Date.now() - 8.64e7;
}
}
},
至于判斷開始時間和結(jié)束時間之間是否超過90天，我也想過用上面第一種方法把超過90天的日期給禁用靶累，開始試了很多次也不生效腺毫，所以我直接在提交表單的時候做了個判斷，我這個人比較較真挣柬，后來想想覺得方法沒錯但是不知道怎么就是實(shí)現(xiàn)不了所以又試了下
我是想在點(diǎn)擊開始時間的時候潮酒，拿到開始時間日期，然后禁用結(jié)束時間里90天以后的日期邪蛔，但是發(fā)現(xiàn)怎么都不生效急黎，后來發(fā)現(xiàn)根本沒執(zhí)行這個方法(我打印的ccc是我選擇開始日期后計(jì)算出來它90天之后的日期)
我點(diǎn)擊的時候頁面上并沒有打印0000和5555也就是說并沒有執(zhí)行到這一步
試了幾次大概明白了規(guī)律就是，在開始時間的操作里面無論是change還是focus都只能操作this.pickerOptionsStart(開始日期配置),同理結(jié)束時間也一樣侧到，所以我想到了在打開結(jié)束時間的時候禁用90天以后的日期就成功了叁熔，哈哈
// 打開結(jié)束時間
focusEnd(){
console.log('focusEnd');
// 如果直接選擇結(jié)束日期(此時還沒選擇開始日期) 則在這之前應(yīng)該先禁用當(dāng)天之前的日期
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);
}
}
}
},
寫的不好的地方歡迎大家留言批評，我看到后也會盡快改正床牧，謝謝！
其實(shí)改起來并不難遭贸，但是我可能就是比較排斥這種功能實(shí)現(xiàn)了才讓說要那樣寫戈咳，所以改起來也多花了點(diǎn)時間。之前參考了很多大神給的例子壕吹，因?yàn)榭吹囊脖容^多著蛙，現(xiàn)在就不一一找了，感謝耳贬！
也給正在找工作的前端朋友一些建議踏堡，盡量還是別找不帶UI設(shè)計(jì)的公司，因?yàn)樘闊┝酥渚ⅲ芏嗳蝿?wù)分配給你的時候說什么看著做顷蟆，樣式不作要求，或者讓你仿照著寫腐魂，結(jié)果一模一樣非說不滿意帐偎，或者就是跟你講你先做，做好了給我看看我再說怎么改蛔屹，總之就是改來改去削樊，加油！沖啊漫贞！
