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

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

javascript jquery html

JavaScript/jQuery-计算接收输入数据和输出数据的天数,javascript,jquery,html,Javascript,Jquery,Html,我有两个数据输入字段，输入日期和输出日期，它们使用日期选择器接收数据。是否可以计算天数，将输入日期和输出日期的值考虑在内，并将其保存在“夜数”字段中？我该怎么做 HTML <div class="form-group"> <label class="col-md-4 control-label">Date Entry</label> <div class="col-md-4 inputGroupContainer"

我有两个数据输入字段，输入日期和输出日期，它们使用日期选择器接收数据。是否可以计算天数，将输入日期和输出日期的值考虑在内，并将其保存在“夜数”字段中？我该怎么做

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>


日期输入
约会
夜间

这是客户端代码。您必须从document.load调用此函数，或者可能是输入和输出日期的onchange事件

这是客户端代码。您必须从document.load调用此函数，或者可能是输入和输出日期的onchange事件。

以下是工作代码，您的日期格式更新为

DD/MM/YYYY

：

jQuery

我强烈建议使用Momentjs。当处理日期和时间时，它是用户友好且非常强大的！这就是我的解决方案将使用的。否则，为了匹配日期格式，您将不得不进行大量解析。只要确保你的格式没有改变，否则你将不得不编辑它

更新的小提琴

这是一张工作票

希望这对您有所帮助

以下是日期格式更新为

DD/MM/YYYY

的工作代码：

jQuery

更新的小提琴

这是一张工作票

希望这有助于

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

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


夜晚的日期差异
进入
出来
夜晚
var input=document.getElementById（'DateEntry'）；
input.addEventListener（'input'，CalcRights）；
var input2=document.getElementById（'DateOut'）；
input2.addEventListener（'input'，CalcLights）；
函数calcNights（）{
试一试{
var nightsout=document.getElementById（'Nights'）；
var元素=document.getElementById（'DateEntry'）；
var entryDate=新日期（element.value）；
var out=document.getElementById（'DateOut'）；
var outDate=新日期（out.value）；
//设置为中午以避免任何DST错误
过期设定小时数（12,0,0）；
entryDate.setHours（12,0,0）；
var差异=过期-进入日期；
var夜数=数学轮数（差/8.64e7）；
如果（isNaN（夜）| |夜<0）{
nightsout.value=''；
返回；
}
nightsout.value=夜晚；
}
捕获（ex）{
//忽略
}
}

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

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


夜晚的日期差异
进入
出来
夜晚
var input=document.getElementById（'DateEntry'）；
input.addEventListener（'input'，CalcRights）；
var input2=document.getElementById（'DateOut'）；
input2.addEventListener（'input'，CalcLights）；
函数calcNights（）{
试一试{
var nightsout=document.getElementById（'Nights'）；
var元素=document.getElementById（'DateEntry'）；
var entryDate=新日期（element.value）；
var out=document.getElementById（'DateOut'）；
var outDate=新日期（out.value）；
//设置为中午以避免任何DST错误
过期设定小时数（12,0,0）；
entryDate.setHours（12,0,0）；
var差异=过期-进入日期；
var夜数=数学轮数（差/8.64e7）；
如果（isNaN（夜）| |夜<0）{
nightsout.value=''；
返回；
}
nightsout.value=夜晚；
}
捕获（ex）{
//忽略
}
}

谢谢你试图帮助我。我把它放在一个盒子里，当输入日期时。。。它不会自动填满我的夜数。。。你知道为什么吗？谢谢你帮我。我把它放在一个盒子里，当输入日期时。。。它不会自动填满我的夜数。。。你知道为什么吗？谢谢你的帮助！我测试了它，但在我的测试中，它不会自动显示夜数。。。我的日期选择器的格式为DD/MM/YYYY HH:MM:ss。。。可能是因为这个吗？当然是因为那个。您可能正在收到一个

NaN

结果。查看我的更新。我已再次更新我的格式，完全符合您告诉我的格式。仍然为我工作。这是我在html中给出的值。。。但是如果我点击这个框并打开datetimepickers 2，它不会计算你发布jQuery的日期扫描？谢谢你的帮助！我测试了它，但在我的测试中，它不会自动显示夜数。。。我的日期选择器的格式为DD/MM/YYYY HH:MM:ss。。。可能是因为这个吗？当然是因为那个。您可能正在收到一个

NaN

结果。查看我的更新。我已再次更新我的格式，完全符合您告诉我的格式。仍然为我工作。这是我在html中给出的值。。。但是如果我点击

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