如何在jquery中动态计算日期和时间差异

时间:2015-06-16 09:19:27

标签: javascript jquery html

我想动态计算日期和时间差异,但它显示1970年的第一个文本框日期值,仅以小时为单位。这里有一些代码,我应该遵循这种代码方法还是应该尝试不同的东西? 代码:

<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />
<br> final result of all days and time boxes:
    <!-- here in these textboxes we want to show total difference calculated in all boxes-->

<input type="text" value="" id="final_result" placeholder="total_days (like 15 days)" /> &nbsp; <input type="text" value="" id="final_result" placeholder="total_hours (like 18 hours" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;

add.click(function(event) {

    // create a limit
   // if ($(".box").length >= maximumBoxes) {
     //   alert("You cannot have more than 10 boxes!");
    //    return;
  //  }

    var listItem = $('<li class="box"></li>');
    // we will add 2 boxes here, but we can modify this in the amountOfBoxes value
    for (var i = 0; i < amountOfInputs; i++) {
        listItem.append('<input type="date" class="input1" />&nbsp;<input type="time" class="input2" name="starttime"/>');
    }
    <!-- here in both textbox we want to show difference between both date and time-->
    listItem.append('output should be like this : <input type="text" class="output" name="value" placeholder="like(2 days)"/>&nbsp;<input type="text" class="output" name="value" placeholder="like(5 hours)"/>');

    // Lets add a link to remove this group as well, with a removeGroup class
    listItem.append('<input type="button" value="Remove" class="removeGroup" />')
    listItem.appendTo(all);
});

// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("change", "input.input1", function(event) {

    // Get the group
    var group = $(this).parent();

    // Get the children (all that arent the .output input)
    var children = group.children("input:not(.output)");

    // Get the input where you want to print the output
    var output = group.children(".output");

    // Set a value
    var value = 0;
    // Here we will run through every input and add its value
    children.each(function() {

        value = Date.parse(this.value);
        var second_hours = parseInt(value)/1000/60/60;
        var hours_day = parseInt(second_hours)/24;
        alert(hours_day);
        // Add the value of every box. If parseInt fails, add 0.
       // console.log(this)
       // value += parseInt(this.value) || 0;
       // var a = parseInt(value);
    });
    // Print the output value
    output.val(value);
    var totValue = 0;
    $('.output').each(function() {
        // Add the value of every box. If parseInt fails, add 0.
        totValue += parseInt(this.value) || 0;
    });
    //document.getElementById('final_result').value = value;

    $('#final_result').val(totValue);
    var test = document.getElementById('final_result').value
    var b = parseInt(test) + parseInt(a);
    alert(a);

});

// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event) {
    event.preventDefault();
    var removedValue = parseInt($(this).parent().find('.output').val(), 10) || 0;
    var prevValue = parseInt($('#final_result').val(), 10) || 0;
    $('#final_result').val(prevValue - removedValue);  
    $(this).parent(".box").remove();
});
</script>

0 个答案:

没有答案