Question

我在表格中有两个字段，如下所示： -

<div class="form-group">
    <label class="control-label col-sm-2" for="date">Date:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" name="training_start_date" value=""> 
        to 
        <input type="text" class="form-control" name="training_end_date" value="">
    </div>
</div>

我需要在两个字段中给出日期，然后输出可以在这个地方的同一页面中获取：

Duration: <!-- Display the difference of those dates without refreshing -->

如果有人提出要做这个要求的概念，我感到很高兴和感激。

Answer 1

您正在寻找类似的东西吗？

HTML：

<!-- JQuery and JQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="form-group">
    <label class="control-label col-sm-2" for="date">Date:</label>
    <div class="col-sm-5">
        <input id="date1" type="text" class="form-control" name="training_start_date" value="">to
        <input id="date2" type="text" class="form-control" name="training_end_date" value="">
    </div>
</div>
<br> <span> Diff:</span>  <span id='diff'> - </span>  <span> Days</span>

JS：

$('#date1').datepicker();
$('#date2').datepicker();

$('#date2').change(function () {
    var diff = $('#date1').datepicker("getDate") - $('#date2').datepicker("getDate");
    $('#diff').text(diff / (1000 * 60 * 60 * 24) * -1);
});

使用JSFiddle：http://jsfiddle.net/ddan/dLtp0k1u/

修改

根据您的评论：这里不需要手动下载。它只是引用托管库。

在一个简单的html页面中使用它：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> </head> <body> <div class="form-group"> <label class="control-label col-sm-2" for="date">Date:</label> <div class="col-sm-5"> <input id="date1" type="text" class="form-control" name="training_start_date" value="">to <input id="date2" type="text" class="form-control" name="training_end_date" value=""> </div> </div> <br> <span> Diff:</span> <span id='diff'> - </span> <span> Days</span> <script> $('#date1').datepicker(); $('#date2').datepicker(); $('#date2').change(function () { var diff = $('#date1').datepicker("getDate") - $('#date2').datepicker("getDate"); $('#diff').text(diff / (1000 * 60 * 60 * 24) * -1); }); </script> </body> </html>

Answer 2

我想我的大部分问题已经解决了......

将类型更改为＆＃39; date＆＃39;为你所有的输入。像这样：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date
使用HTML onblur属性，以便每当输入框失焦时运行您的函数。

使用以下代码计算日期差异。
代码信用： http://ditio.net/2010/05/02/javascript-date-difference-calculation/

var DateDiff = {

    inDays: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000));
    },

    inWeeks: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000*7));
    },

    inMonths: function(d1, d2) {
        var d1Y = d1.getFullYear();
        var d2Y = d2.getFullYear();
        var d1M = d1.getMonth();
        var d2M = d2.getMonth();

        return (d2M+12*d2Y)-(d1M+12*d1Y);
    },

    inYears: function(d1, d2) {
        return d2.getFullYear()-d1.getFullYear();
    }
}

var dString = "May, 20, 1984";

var d1 = new Date(dString);
var d2 = new Date();

document.write("<br />Number of <b>days</b> since "+dString+": "+DateDiff.inDays(d1, d2));
document.write("<br />Number of <b>weeks</b> since "+dString+": "+DateDiff.inWeeks(d1, d2));
document.write("<br />Number of <b>months</b> since "+dString+": "+DateDiff.inMonths(d1, d2));
document.write("<br />Number of <b>years</b> since "+dString+": "+DateDiff.inYears(d1, d2));

显示两个文本字段输入之间的日期差异而不刷新页面？

2 个答案: