javascript - 用户输入时刻js的两个日期之间的差异

Question

这是我的表格:

<form>
    <input type="text" placeholder="Check in date" id="checkin" />
    <input type="text" placeholder="Check out date" id="checkout" />
    <input type="submit" onclick="result()" id="submit" />
</form>

这是我计算 money=days*price 的 javascript

<script language="javascript" type="text/javascript">

    function result()
    {   
          var a = document.getElementById("checkin").value;
          var b = document.getElementById("checkout").value;

          var checkin = moment(a).format('DD-MM-YYYY');
          var checkout = moment(b).format('DD-MM-YYYY');        

          var days= checkout.diff(checkin, 'days');

          var price=100;
          alert("The money you have to pay is: "+days*price);


    }
</script>

这是我的测试用例:入住日期 = 05-12-2014，结账日期 = 25-12-2014当我点击提交时，没有任何反应。任何人都可以向我解释为什么以及如何解决这个问题。谢谢!

Answer 1

function result(e) //e refers to event.
{   
      e.preventDefault();
      var a = document.getElementById("checkin").value;
      var b = document.getElementById("checkout").value;

      var checkin = moment(a, 'DD-MM-YYYY');
      var checkout = moment(b, 'DD-MM-YYYY');        

      var days= checkout.diff(checkin, 'days');

      var price=100;
      alert("The money you have to pay is: "+days*price);


}

<script src="http://momentjs.com/downloads/moment.js"></script>
<form>
    <input type="text" placeholder="Check in date" id="checkin" />
    <input type="text" placeholder="Check out date" id="checkout" />
    <input type="submit" onclick="result(event)" id="submit" />
</form>

首先，您要提交表单。您需要使用 event.preventDefault() 来阻止这种情况。我想你的问题在那之后就会消失。我强烈建议限制日期输入。要么使用库从选择器中选择日期，要么为用户提供一些日期格式指导。