需求:
點擊研究週期的年月日,結束時間對應加減年月日
藉助插件:moment.js. moment.js 是一個 JavaScript 日期處理類庫,用於解析、檢驗、操作、以及顯示日期
我最初的做法:
1、把結束時間先存起來
2、分別監聽研究週期年月日的input,當年增加就給結束時間加上年,如果月也增加,把年先保存起來賦值給結束時間,拿這個新的結束時間給月作爲結束時間來加月,以此類推
3、這樣做會導致加了年之後再加月,又回來加年,計算就會出亂
粘貼一段很噁心的代碼
//最初的結束時間
var initEndTime = $("[name='endTime']").val();
//改變日的結束時間
var dayEndTime;
//改變月的結束時間
var monthEndTime;
//改變年的結束時間
var yearEndTime;
$("#researchCycle input").on("change",function(){
if($(this).attr("name") === "researchDay" ){
if(dayEndTime){
var now = moment(dayEndTime);
}else{
var now = moment(initEndTime);
}
var thisVal = $(this).val();
var changTime = parseInt( thisVal - 最初天數);
now.add(changTime,'d')
var end = now.format("YYYY-MM-DD HH:mm:ss").toString()
monthEndTime = end;
yearEndTime = end;
$("[name='endTime']").val(end);
}
if($(this).attr("name") === "researchMonth"){
if(monthEndTime){
var now = moment(monthEndTime);
}else{
var now = moment(initEndTime);
}
var thisVal = $(this).val();
var changTime = parseInt( thisVal - 最初月數);
now.add(changTime,'M')
var end = now.format("YYYY-MM-DD HH:mm:ss").toString()
yearEndTime = end;
dayEndTime = end;
$("[name='endTime']").val(end);
}
if($(this).attr("name") === "researchYear"){
if(yearEndTime){
var now = moment(yearEndTime);
}else{
var now = moment(initEndTime);
}
var thisVal = $(this).val();
var changTime = parseInt( thisVal - 最初年數);
now.add(changTime,'y')
var end = now.format("YYYY-MM-DD HH:mm:ss").toString()
dayEndTime = end;
monthEndTime =end;
$("[name='endTime']").val(end);
最終的做法:
經過了各種琢磨,各種放棄,發現自己腦袋不會轉彎,那麼簡單的問題想那麼複雜
解決思路:
1、開始時間是不變的,結束時間 = 週期 + 開始時間
2、定義一個年月日的變量,監聽研究週期的input,不管哪個改變都給結束時間加上對應的年月日
//週期改變結束時間也跟着改變
var startTime = $("[hhitdataname='startTime']").val();
$("#researchCycle input").on("change",function(){
var now = moment(startTime);
var curYearVal = $("[name='researchYear']").val();
var curMonthVal = $("[name='researchMonth']").val();
var curDayVal = $("[name='researchDay']").val();
now.add(curYearVal,'y')
now.add(curMonthVal,'M')
now.add(curDayVal,'d')
var end = now.format("YYYY-MM-DD HH:mm:ss").toString()
$("[name='endTime']").val(end);
})
四行代碼,就替代了之前的一堆,想法真的很可怕,算法更可怕