使用jQuery日期选择器减去日期

Question

Currently working on jquery clone and datepicker where it will calulate the dates and it will check the overlaping dates. But if the click the less button the code works perfectly it was removing the row but it was not detecting the dates which was there in the cloned div. For example when the user select the date 10-01-1990 & 10-01-1995 for this the total was Total work experience 5 years 0 Months & in the cloned div if the user gave 10-01-1996 & 10-01-2015 so the total was Total work experience 25 years 0 Months. If the user click the lessbtn button the cloned one will remove but the total year was not detecting.

Here is the jquery code

$(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";
                }

            });

Kindly please suggest me.

I am confused here do i want to put any count or something so when the user click the less button the count should reduce one and the value should get detected. Kindly give me tips here

Hereis the fiddle Link

Thanks & Regards

Answer 1

Your issue is you are not calling any logic to update the difference while removing the cloned object. You wrote code for updating the difference only in datepicker.change event.

Demo

Updated code:

$(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";
      }

    });

  }
}