1

2つの日付の差を計算するためのJavaScript計算用の次のコードがあります。フィールド「conference_date_out」の1つの.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 に答える