javascript - 使用 jquery 日期选择器减去日期

Question

目前正在研究 jquery clone 和 datepicker，它将计算日期并检查重叠日期。但是，如果单击较少按钮，代码将完美地工作，它正在删除该行，但它没有检测到克隆的 div 中的日期。例如，当用户为此选择日期 10-01-1990 和 10-01-1995 时，总数是 Total work experience 5 years 0 Months & 在克隆的 div 中，如果用户提供 10-01-1996 和 10-01-2015，那么总工作经验为 25 年 0 个月。如果用户单击 lessbtn 按钮，克隆的将被删除，但未检测到总年份。

这是jquery代码

$(document).on('change', ".datepicker", function (){
        var valid=true;
        $.each($('.datepicker'),function(){
            if($(this).val()=="")
            {
                valid=false;
                return false;
            }
         });
         if(valid)
         {
            var dateStart=[];
            var dateEnd=[];
            $.each($('.datepicker'),function(){
                if($(this).hasClass('startDate'))
                    dateStart.push($(this).val())
                else
                    dateEnd.push($(this).val())
            });

            $.each($(dateStart),function(key,value){
                var x = dateStart[key].split("-");
                var y = dateEnd[key].split("-");

                var failed = false;
                var fromdate = new Date(x[2], x[0] - 1, x[1]);
                var todate = new Date(y[2], y[0] - 1, y[1]);
                var locDiffDays = parseInt((todate.getTime() - fromdate.getTime()) / (1000 * 60 * 60 * 24));

                console.log(x);
                console.log(y);
                console.log(fromdate);
                console.log(todate);
                console.log(locDiffDays);

                if(locDiffDays<0){
                        alert("To date " + dateEnd[key] + " should be greater then from date " + dateStart[key] );
                        console.log("invalid from and to dates"); failed = true; return false;
                }

                if(dateStart[key-1]){
                    var x1 = dateStart[key-1].split("-");
                    var y1 = dateEnd[key-1].split("-");

                    var fromdate1 = new Date(x1[2], x1[0] - 1, x1[1]);
                    var todate1 = new Date(y1[2], y1[0] - 1, y1[1]);
                    var locDiffDays1 = parseInt((todate1.getTime() - fromdate1.getTime()) / (1000 * 60 * 60 * 24));
                    console.log(x1);
                    console.log(y1);
                    console.log(fromdate1);
                    console.log(todate1);
                    console.log(locDiffDays1);

                    var locDiffDays2 = parseInt((fromdate.getTime() - fromdate1.getTime()) / (1000 * 60 * 60 * 24));
                    var locDiffDays3 = parseInt((todate.getTime() - todate1.getTime()) / (1000 * 60 * 60 * 24));
                    var locDiffDays4 = parseInt((fromdate.getTime() - todate1.getTime()) / (1000 * 60 * 60 * 24));

                    console.log("locDiffDays2: " + locDiffDays2);
                    if(locDiffDays2<0){
                        alert("From date " + dateStart[key] + " should be greater than previous from date " + dateStart[key-1] );
                        console.log("invalid from dates"); failed = true; return false;
                    }

                    if(locDiffDays3<0){
                        alert("To date " + dateStart[key] + " should be greater than previous To date " + dateStart[key-1] );
                        console.log("invalid from dates"); failed = true; return false;
                    }

                    if(locDiffDays4<0){
                        alert("From date " + dateStart[key] + " should be greater than previous To date " + dateEnd[key-1] );
                        console.log("invalid from dates"); failed = true; return false;
                    }
                }

                if(key == dateStart.length-1 && !failed){
                    var firstDate = dateStart[0].split('-');
                    firstDate = new Date(firstDate[2], firstDate[0] - 1, firstDate[1]);
                    var lastDate = dateEnd[dateEnd.length-1].split('-');
                    lastDate = new Date(lastDate[2], lastDate[0] - 1, lastDate[1]);
                    console.log(lastDate);
                    console.log(firstDate);
                    //var diffYears = (lastDate.getTime() - firstDate.getTime()) / (1000 * 60 * 60 * 24 * 365);
                    var diffMonths = monthDiff(firstDate, lastDate);
                    //diffYears = parseInt(''+diffYears);

                    var diffYears = diffMonths/12;
                    diffYears = parseInt(''+diffYears);

                    diffMonths = diffMonths - (diffYears * 12)

                    document.getElementById("txt_expy").innerHTML = diffYears + " years";
                    document.getElementById("txt_expm").innerHTML = diffMonths + " Months";
                }

            });

请给我建议。

我在这里很困惑，我是否想放置任何计数或其他东西，所以当用户单击较少按钮时，计数应该减少一个，并且应该检测到该值。请在这里给我提示

这是 fiddle Link

感谢和问候

Answer 1

您的问题是您在删除克隆对象时没有调用任何逻辑来更新差异。您编写了仅在 datepicker.change 事件中更新差异的代码。

Demo

更新代码:

$(document).on('change', ".datepicker", function() {
  updateDiff()
});
$(document).on('click', ".btn_less1", function() {
  var len = $('.cloned-row3').length;
  if (len > 1) {
    $(this).closest(".btn_less1").parent().parent().parent().remove();
    updateDiff();
  }
});



function updateDiff() {
  var valid = true;
  $.each($('.datepicker'), function() {
    if ($(this).val() == "") {
      valid = false;
      return false;
    }
  });
  if (valid) {
    var dateStart = [];
    var dateEnd = [];
    $.each($('.datepicker'), function() {
      if ($(this).hasClass('startDate')) dateStart.push($(this).val())
      else dateEnd.push($(this).val())
    });

    $.each($(dateStart), function(key, value) {
      var x = dateStart[key].split("-");
      var y = dateEnd[key].split("-");

      var failed = false;
      var fromdate = new Date(x[2], x[0] - 1, x[1]);
      var todate = new Date(y[2], y[0] - 1, y[1]);
      var locDiffDays = parseInt((todate.getTime() - fromdate.getTime()) / (1000 * 60 * 60 * 24));

      if (locDiffDays < 0) {
        alert("To date " + dateEnd[key] + " should be greater then from date " + dateStart[key]);
        console.log("invalid from and to dates");
        failed = true;
        return false;
      }

      if (dateStart[key - 1]) {
        var x1 = dateStart[key - 1].split("-");
        var y1 = dateEnd[key - 1].split("-");

        var fromdate1 = new Date(x1[2], x1[0] - 1, x1[1]);
        var todate1 = new Date(y1[2], y1[0] - 1, y1[1]);
        var locDiffDays1 = parseInt((todate1.getTime() - fromdate1.getTime()) / (1000 * 60 * 60 * 24));

        var locDiffDays2 = parseInt((fromdate.getTime() - fromdate1.getTime()) / (1000 * 60 * 60 * 24));
        var locDiffDays3 = parseInt((todate.getTime() - todate1.getTime()) / (1000 * 60 * 60 * 24));
        var locDiffDays4 = parseInt((fromdate.getTime() - todate1.getTime()) / (1000 * 60 * 60 * 24));

        console.log("locDiffDays2: " + locDiffDays2);
        if (locDiffDays2 < 0) {
          alert("From date " + dateStart[key] + " should be greater than previous from date " + dateStart[key - 1]);
          console.log("invalid from dates");
          failed = true;
          return false;
        }

        if (locDiffDays3 < 0) {
          alert("To date " + dateStart[key] + " should be greater than previous To date " + dateStart[key - 1]);
          console.log("invalid from dates");
          failed = true;
          return false;
        }

        if (locDiffDays4 < 0) {
          alert("From date " + dateStart[key] + " should be greater than previous To date " + dateEnd[key - 1]);
          console.log("invalid from dates");
          failed = true;
          return false;
        }
      }

      if (key == dateStart.length - 1 && !failed) {
        var firstDate = dateStart[0].split('-');
        firstDate = new Date(firstDate[2], firstDate[0] - 1, firstDate[1]);
        var lastDate = dateEnd[dateEnd.length - 1].split('-');
        lastDate = new Date(lastDate[2], lastDate[0] - 1, lastDate[1]);
        console.log(lastDate);
        console.log(firstDate);
        //var diffYears = (lastDate.getTime() - firstDate.getTime()) / (1000 * 60 * 60 * 24 * 365);
        var diffMonths = monthDiff(firstDate, lastDate);
        //diffYears = parseInt(''+diffYears);

        var diffYears = diffMonths / 12;
        diffYears = parseInt('' + diffYears);

        diffMonths = diffMonths - (diffYears * 12)

        document.getElementById("txt_expy").innerHTML = diffYears + " years";
        document.getElementById("txt_expm").innerHTML = diffMonths + " Months";
      }

    });

  }
}