需求:
点击研究周期的年月日,结束时间对应加减年月日
借助插件: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);
})
四行代码,就替代了之前的一堆,想法真的很可怕,算法更可怕