1

我有以下代码用于 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>
4

3 回答 3

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;
});
于 2012-05-30T17:02:58.363 回答
0

您只将更新功能绑定到“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-30T17:08:19.470 回答
0

您可以按如下方式简化您的 jquery：

  1. 将共享课程添加到您的会议日期：

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

    ...

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

  2. 然后您可以使用以下命令监听两者的更改：

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

    代替：

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

您可以节省 javscript 代码，并且可以将共享类用于其他侦听器/样式。

于 2012-05-30T17:09:55.513 回答