Question

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

使用jsfiddle的完整工作代码：

我尝试在文本框中显示两天的差异。这是视图代码：

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

Answer 2

在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);
        }
    });
});

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

2 个答案:

实施例