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

【问题标题】：Difference of two dates display in another textbox两个日期的差异显示在另一个文本框中
【发布时间】：2016-12-16 11:21:36
【问题描述】：

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

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

【问题讨论】：

需要注意的一点无关紧要：您的 javascript 看起来很乱。你将 vanilla javascript 和 jquery 混在一起太多了。尽量坚持其中任何一个以避免混淆。
你想显示什么不同的天数？
@user5200704 .我的意思是当前日期和指定日期之间的差异，通过输入选择并在使用的名称文本框中显示差异结果
您的计算完成但在 datepickar 中的每一行选择中以文本显示有问题？
是的，我需要计算差异并在每一行中显示

标签： jquery html date

【解决方案1】：

在 PHP 中你可以这样做：

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

对于在 javascript 中处理日期，我建议使用 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

示例

这是一个使用 moment.js 和 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);
        }
    });
});

【讨论】：

这是后端代码。但我试图在前端的另一个文本框中找到两个日期结果的差异
我在 jsfiddle 中提供了完整的代码，请看链接，你可以试试.. jsfiddle.net/r83vmv1q/12

【解决方案2】：

首先像这样更改所有你调用 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/

【讨论】：