xr33dx xr33dx - 5 months ago 15
HTML Question

Difference of two dates display in another textbox

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:


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><input type="text" name="assigned_date[]" value="" class="assigned_date" />
<span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
<td><input type="text" name="last_date[]" value="" class="last_date" />
<span class="text-danger"><?php echo form_error('last_date[]');?></span>
<td><input type="text" name="spent[]" value="" class="spent" />
<span class="text-danger"><?php echo form_error('spent[]');?></span>
<td><input type="text" name="remaining[]" value="" />
<span class="text-danger"><?php echo form_error('remaining[]');?></span>
<td><input type="text" name="frequency[]" value="" />
<span class="text-danger"><?php echo form_error('frequency[]');?></span>

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

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;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
case "checkbox":
newcell.childNodes[0].checked = false;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;

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


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

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:


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') ){
   // you can add more conditional logic here

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