计算html中两个输入类型=“日期”之间的天数

时间:2014-10-06 12:48:07

标签: javascript jquery

我有这段HT​​ML代码,其中我有两个日期选择器(输入类型=“日期”)和一个id =“numdays”的文本字段。我想计算两个选定日期之间的天数,并在文本字段中显示该数字。我还想限制比今天更早的日期选择。我认为这可以通过javascript或jquery来完成。非常感谢您的帮助。感谢。

<div id="reserve_form">

<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" </p></div>

<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date"/></p></div>

<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays" name="numdays"/></div>

</div>

1 个答案:

答案 0 :(得分:2)

你可以这样做。

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">
        function GetDays(){
                var dropdt = new Date(document.getElementById("drop_date").value);
                var pickdt = new Date(document.getElementById("pick_date").value);
                return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
        }

        function cal(){
        if(document.getElementById("drop_date")){
            document.getElementById("numdays2").value=GetDays();
        }  
    }

    </script>
</head>
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>

    <div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>

    <div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>

    </div>
</body>