jquery - 两个日期的差异显示在另一个文本框中

Question

我已经在一行中创建了表格，并在表格中添加了行按钮。当我们点击添加按钮时，它会在表格中创建第一行的相同副本。

带有 jsfiddle 的完整工作代码:

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

我尝试在文本框中显示两天的差异。这是查看代码:

<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> 

所以我的问题是当用户从 j 查询中选择分配日期和最后日期时，当前日期和分配日期之间的差异应该显示在用过的文本框中，最后日期和当前日期之间的差异应该显示在剩余文本框中。

这是添加新行的 jquerycode:

<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>

这里是 jquery 计算差异代码:

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;

这是 jsfiddle 中的完整工作代码: JSFiddle

Answer 1

首先像这样更改所有调用 datepickar 选项设置的地方

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

在 datepickar 选择日期时调用一个函数。

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
} 

完整示例 https://jsfiddle.net/r83vmv1q/12/