Javascript日期计算事件

我有以下代码用于计算两个日期之间的差异的JavaScript计算。我有一个“conference_date_out”字段的.change事件的功能，但是，如果我返回并更改“date_in”日期 - “总天数”中的计算不会更新。我究竟做错了什么？Javascript日期计算事件

的JavaScript：

<script type="text/javascript"> 
    $(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: 'dd-mm-yy' 
     })({ 
      changeMonth: true, 
      changeYear: true 
     }); 
     $(".datepicker").datepicker; 
    }); 
    $('#conference_date_out').change(function() { 
     var start = $('#conference_date_in').datepicker('getDate'); 
     var end = $('#conference_date_out').datepicker('getDate'); 
     var days = (end - start)/1000/60/60/24; 
     document.getElementById('total_days').value = days; 
    }); 
</script>

HTML：

<title>Conference Form</title> 
<script type="text/javascript" src="css/jqueryui.css"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jqueryui.js"></script> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<link href="css/jqueryui.css" rel="stylesheet" type="text/css" /> 
<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <table width="705" border="1" align="left" cellpadding="1"> 
      <form action="" method="get" name="myform"> 
       <tr> 
        <td width="151"> 
         <label>Company Name</label> 
        </td> 
        <td width="158"> 
         <input type="text" name="companyname" id="companyname" /> 
        </td> 
        <td width="155">Enquiry Date</td> 
        <td width="213"> 
         <input type="text" name="enquiry_date" id="enquiry_date" /> 
        </td> 
       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <td>Conference Date In</td> 
        <td> 
         <input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" 
         /> 
        </td> 
        <td>Conference Date Out</td> 
        <td> 
         <input type="text" name="conference_date_out" id="conference_date_out" 
         class="datepicker" /> 
        </td> 
       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <td>Number of Delegates</td> 
        <td> 
         <input type="text" name="no_of_delegates" id="no_of_delegates" /> 
        </td> 
        <td>Total Days</td> 
        <td> 
         <input type="text" name="total_days" id="total_days" /> 
        </td> 
       </tr> 
      </form> 
     </table> 
    </div> 
</body> 

</html>

来源

2012-05-30 user1426583

您正在将css/jqueryui.css嵌入为脚本和样式表。 – Bergi

此外，布局表格是一个非常糟糕的做法，我们现在有CSS。（尽管与问题完全无关。） –

您只将更新函数绑定到'out'字段。试试这个：

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: 'dd-mm-yy' 
    })({ 
     changeMonth: true, 
     changeYear: true 
    }); 
    $(".datepicker").datepicker; 
}); 

var calcDate = function() { 
    var start = $('#conference_date_in').datepicker('getDate'); 
    var end = $('#conference_date_out').datepicker('getDate'); 
    var days = (end - start)/1000/60/60/24; 

    document.getElementById('total_days').value = days; 
} 

$('#conference_date_out').change(calcDate); 
$('#conference_date_in').change(calcDate);

来源

2012-05-30 17:08:19

简单：你绑定的change处理器只#conference_date_out，而不是#conference_date_in。

$('#conference_date_in').add('#conference_date_out').change(function() { 
    var start = $('#conference_date_in').datepicker('getDate'); 
    var end = $('#conference_date_out').datepicker('getDate'); 
    var days = (end - start)/1000/60/60/24; 
    document.getElementById('total_days').value = days; 
});

来源

2012-05-30 17:02:58

非常感谢。它现在工作很好。有没有办法阻止用户选择过去的日期？（并从选择_conference_date_in在“date_out”之后） – user1426583

查看[minDate]（http://docs.jquery.com/UI/Datepicker#option-minDate）和[maxDate]（http：/ /docs.jquery.com/UI/Datepicker#option-maxDate）在jQuery UI Datepicker API页面上的选项在你的'change'处理程序中，你可以设置'＃conference_date_out'的'minDate'为当前值＃ conference_date_in'和'＃conference_date_in'的'maxDate'设置为'＃conference_date_out'的当前值。我认为你需要做更多的工作来确保你可以在同一天设置它们， –

谢谢。我编辑过的代码如下:(但它不工作，是我的语法不正确或放在错误的地方？）$（'＃conference_date_out'）。change（calcDate）; $（'＃conference_date_in'）。change（calcDate）;（{minDate：-0，maxDate：“+ 12M + 100D”}）; – user1426583

您可以简化您的jQuery如下：

共享类添加到您的会议日期：

<input class="conference_date" name="conference_date_out"/>

...

<input class="conference_date" name="conference_date_out"/>
，那么你可以听更改同时使用：

$('.conference_date').change(function() { ...

代替：

$('#conference_date_in').add('#conference_date_out').change(function() {

您节省javscript代码，你可以使用其他监听器/样式的共享类。

来源

2012-05-30 17:09:55

Javascript日期计算事件

回答

相关问题