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

Difference between two dates from user input moment js

本文关键字：日期 两个 之间 时刻 输入 js 用户      更新时间：2023-09-26

这是我的表单：

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

这是我的测试用例：入住日期=2014年5月12日，结账日期=2014年12月25日当我点击提交时，什么都不会发生。有人能向我解释一下为什么以及如何解决这个问题吗。非常感谢。

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

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

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

请参阅jsbin

相关文章：