jquery JavaScript日期计算事件

j5fpnvbx  于 2023-01-30  发布在  jQuery
关注(0)|答案(3)|浏览(108)

我有下面的JavaScript计算代码来计算两个日期之间的差异。我有一个conference_date_out字段的.change事件的函数,但是,如果我返回并更改date_in日期-"total days"中的计算不更新。我做错了什么?
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>

超文本:

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

mec1mxoz1#

很简单:只将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;
});
mf98qq94

mf98qq942#

您只将更新函数绑定到“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);
vqlkdk9b

vqlkdk9b3#

您可以按如下方式简化jquery:
1.将共享类添加到您的会议日期:
<input class="conference_date" name="conference_date_out"/>
...
<input class="conference_date" name="conference_date_out"/>
1.则可以使用以下命令侦听两者的更改:

一米三米一x

而不是:
$('#conference_date_in').add('#conference_date_out').change(function() {
您保存了JavaScript代码,并且可以将共享类用于其他侦听器/样式。

相关问题