【问题标题】:Calculate number of days between two input type = "date" in html [duplicate]在html中计算两个输入类型=“日期”之间的天数[重复]
【发布时间】:2014-11-30 17:34:49
【问题描述】:

我有这段 html 代码,其中我有两个日期选择器(输入类型 =“日期”)和一个 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>

【问题讨论】:

  • 你试过了吗...anything?
  • 对于日期时间管理和处理,我强烈建议您使用现有的库。利用他们来执行这种计算。我通常使用moment.js
  • 您的标记无效,pick_date 缺少关闭 &gt;
  • Pravish,您为什么撤消 Bhushan Kawadkar 的编辑,让人们可以看到您的 HTML(而不是更改任何其他内容)?这是一个很好的编辑,有一个很好的理由。
  • @BhushanKawadkar:没错,尽管浏览器会很高兴地产生正确的结果。 (并不意味着他不应该修复它。:-))

标签: javascript jquery


【解决方案1】:

你可以这样做。

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

【讨论】:

  • 当我选择两个日期时,如何让它在文本字段中自动显示结果?谢谢
  • 感谢您的帮助!!!我已经编辑了部分代码,当我更改日期时,文本字段中会显示天数的差异。
猜你喜欢
  • 2012-12-07
  • 2011-10-29
  • 2019-02-10
  • 2014-07-08
  • 1970-01-01
  • 2016-12-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多