Question

我有以下代码进行javascript计算，以计算2个日期之间的差异。我在其中一个字段“conference_date_out”的.change事件上有函数，但是，如果我返回并更改“date_in”日期 - “总天数”中的计算不会更新。我做错了什么？

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>

Answer 1

简单：您只将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;
});

Answer 2

您只将更新功能绑定到“输出”字段。试试这个：

$(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);

Answer 3

您可以按如下方式简化您的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代码，并且可以将共享类用于其他侦听器/样式。

Javascript日期计算事件

3 个答案: