Question

我有两个数据输入字段，输入日期和输出日期，它们使用日期选择器接收数据。是否可以计算天数，考虑输入日期和退出日期的值，并将其保存在现场的夜晚数量？我怎么能这样做？

HTML

    <div class="form-group">
        <label class="col-md-4 control-label">Date Entry</label>
        <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                <input name="DateEntry" id="DateEntry"  class="form-control" type="text">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label">DateOut</label>
        <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                <input name="DateOut" id="DateOut" class="form-control" type="text">
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label">NºNights</label>
        <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-list-ol"></i></span>
                <input name="Nights" class="form-control" type="text">
            </div>
        </div>
    </div>

Answer 1

var start = $('#DateEntry').val();
var end = $('#DateOut').val();

// end - start returns difference in milliseconds 
var diff = new Date(end - start);

// get nights
var days = diff/1000/60/60/24;

//set nights
$('#Nights').val(days)

这是客户端代码。你必须从document.load调用它，或者可以是进入和退出日期的onchange事件。

Answer 2

这里有一个类似的方法，用钩子来处理文本更改。

<html>
<head>
    <title>Date Diff in Nights</title> 
</head>
<body>
    <div id="container">
        <span class="input-group-addon"><i class="glyphicon glyphicon-time">entry</i></span>
        <input name="DateEntry" id="DateEntry" class="form-control" type="text" >

        <span class="input-group-addon"><i class="glyphicon glyphicon-time">out</i></span>
        <input name="DateOut" id="DateOut" class="form-control" type="text" >

        <span class="input-group-addon"><i class="fa fa-list-ol">nights</i></span>
        <input name="Nights" id="Nights" class="form-control" type="text">
    </div>
    <script type="text/javascript">
        var input = document.getElementById('DateEntry');
        input.addEventListener('input', calcNights);
        var input2 = document.getElementById('DateOut');
        input2.addEventListener('input', calcNights);
        function calcNights() {

            try {
                var nightsout = document.getElementById('Nights');
                var element = document.getElementById('DateEntry');
                var entryDate = new Date(element.value);
                var out = document.getElementById('DateOut');
                var outDate = new Date(out.value);
                // Set to noon to avoid any DST errors
                outDate.setHours(12, 0, 0);
                entryDate.setHours(12, 0, 0);
                var difference = outDate - entryDate;
                var nights = Math.round(difference / 8.64e7);
                if (isNaN(nights) || nights < 0) {
                    nightsout.value = '';
                    return;
                }
                nightsout.value = nights;
            }
            catch (ex) {
                //ignore
            }
        } 
    </script> 
</body>
</html>

Answer 3

以下是您的日期格式更新为DD/MM/YYYY的工作代码：

<强>的jQuery

我强烈建议使用Momentjs。在使用日期和时间时，它是用户友好且非常强大的。倍！这就是我的解决方案将使用的。否则，您将不得不进行一堆解析以匹配您的日期格式。只需确保您的格式不会改变，否则您将不得不编辑它！

$(document).ready(function() {

  $('#TestOne').datetimepicker({
    format: 'DD/MM/YYYY HH:mm:ss',
  });

  $('#TestTwo').datetimepicker({
    format: 'DD/MM/YYYY HH:mm:ss',
  });

   $("#DateOut").blur(function() {
     var str1 = $("#DateEntry").val();
     var str2 = $("#DateOut").val();

     var dateEntry = moment(str1, "DD/MM/YYYY");
     var dateOut = moment(str2, "DD/MM/YYYY");
     var range = dateOut.diff(dateEntry, 'days');

   $("#NightsBetween").val(range);
  });
});

更新后的内容

这是一个有效的JSFiddle

希望这有帮助

JavaScript / jQuery - 计算天数，接收输入数据和输出数据

3 个答案: