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>

这是我的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()来阻止这种情况。我认为你的问题会在那之后消失。我强烈建议限制日期输入。使用库从选择器中选择日期，或者为用户提供日期格式的一些指导。

Answer 2

使用此功能将日期转换为时刻日期

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

请参阅jsbin

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

2 个答案: