Difference of two dates display in another textbox

Question

I have created form in a row and on add row button in a table.When we click on add button then it create the same clone of first row in a table.

full working code with jsfiddle:

https://jsfiddle.net/r83vmv1q/12/

I try to display difference of two days in the text box. Here is the view code:

<td><input type="checkbox" name="chk"/></td>
 <!-- <td><input type="text" name="date[]" value="" /></td>-->
  <td><input type="text" name="work[]" value="" class="task" />
      <span class="text-danger"><?php echo form_error('work[]');?></span>
  </td>
  <td><input type="text" name="assigned_date[]" value="" class="assigned_date" />
      <span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
  </td>
  <td><input type="text" name="last_date[]" value="" class="last_date" />
      <span class="text-danger"><?php echo form_error('last_date[]');?></span>
  </td>
  <td><input type="text" name="spent[]" value="" class="spent" />
      <span class="text-danger"><?php echo form_error('spent[]');?></span>
  </td>
  <td><input type="text" name="remaining[]" value="" />
      <span class="text-danger"><?php echo form_error('remaining[]');?></span>
  </td>
  <td><input type="text" name="frequency[]" value="" />
      <span class="text-danger"><?php echo form_error('frequency[]');?></span>
  </td> 

so my problem is when user select the assign date and last date from j query then the difference between current date and assign date should be display in spent textbox and diffrence between last date and current date should be dislpay in remaining text box.

Here is jquerycode to add new row:

<SCRIPT language="javascript">
    function addRow(tableID) {
      $(".last_date").datepicker("destroy");
      $(".assigned_date").datepicker("destroy");

      var table = document.getElementById(tableID);

      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);

      var colCount = table.rows[1].cells.length;

      for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
          case "text":
              newcell.childNodes[0].value = "";
              break;
          case "checkbox":
              newcell.childNodes[0].checked = false;
              break;
          case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;

        }
      }
      var dateAssignedId = Math.round(new Date().getTime() + (Math.random() * 100));
      var dateDueId = Math.round(new Date().getTime() + (Math.random() * 100));
      $(row).find('.assigned_date')[0].id = dateAssignedId; 
      $(row).find('.last_date')[0].id = dateDueId;

      $(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
      $(".last_date").datepicker({dateFormat: "yy-mm-dd"});
    }


  </SCRIPT>

 <script>
  $(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
  $(".last_date").datepicker({dateFormat: "yy-mm-dd"});
</script>

here is jquery calculate diffrence code:

var start = new Date();
    var end   = $('assigned_date').datepicker('getDate');
    var days   = (end - start)/1000/60/60/24;
    var textbox = document.getElementByClass("spent");
    textbox.value = days;

Here is the full working code in jsfiddle: JSFiddle

Answer 1

In PHP you can do something like this:

$datetime1 = new DateTime('2009-10-11');
$datetime2 = new DateTime('2009-10-13');
$interval = $datetime1->diff($datetime2);
echo $interval->format('%R%a days');

For working with dates in javascript, I suggest using Moment.js

<!-- HTML -->
<input type="date" value="2016-11-20" class="start-date" />
<input type="date" value="2016-11-25" class="end-date" />

<!-- Javascript -->
<script type="text/javascript">
var startDate = moment($('.start-date').val()).format('YYYY-MM-DD');
var endDate = moment($('.end-date').val()).format('YYYY-MM-DD');

var difference = startDate.diff(endDate, 'days');

console.log(difference);
</script

Example

This is a working example using moment.js and jQuery

<table class="table table-hover">
    <thead>
        <tr>
            <th>Date from</th>
            <th>Date to</th>
            <th>Difference</th>
            <th><button class="btn btn-primary add-row">+</button></th>
        </tr>
    </thead>
    <tbody class="row-container">
    </tbody>
</table>

$(document).ready(function () {
    $(document).on('click', '.add-row', function () {
        var r = $('.row-container tr:last').data('row') || 0;
        r++;
        var content = '<tr data-row="' + r + '"><td><input type="text" class="start-date" name="startdate[]" /></td><td><input type="text" class="end-date" name="enddate[]" /></td><td><input type="text" class="difference" name="difference[]" disabled /></td></tr>';
        $('.row-container').append(content);
    });

    $(document).on('change', '.start-date, .end-date', function () {
        var format = "YYYY-MM-DD";
        var rowId = $(this).parent().closest('tr').data('row');
        var startDate = moment($('tr[data-row=' + rowId + '] .start-date').val(), format);
        var endDate = moment($('tr[data-row=' + rowId + '] .end-date').val(), format);


        if (startDate.isValid() && endDate.isValid()) {
            var difference = endDate.diff(startDate, 'days');
            $('tr[data-row=' + rowId + '] .difference').val(difference);
        }
    });
});

Answer 2

First change all every where you called datepickar option settings like this

$(".assigned_date").datepicker({dateFormat: "yy-mm-dd", onSelect:onChangeDate});

call a function when datepickar select date.

function onChangeDate(dateText, inst){

   var start = new Date();
    var end   = $(this).datepicker('getDate');
    var days   = Math.ceil((end - start)/1000/60/60/24);
    if( $(this).hasClass('assigned_date') ){
      $(this).closest('tr').find('.spent').val(days);
    }
   // you can add more conditional logic here
} 

complete example https://jsfiddle.net/r83vmv1q/12/