Question

目的是计算两个日期的差异我仍然混淆为什么它不会工作，因为我从某人的教程中写了一段代码。

<!Doctype html>
<html><body style='background:white;'><head><title>tugas akhir</title>

<meta charset='utf-8'>

  <link rel='stylesheet' href='js/jquery-ui.js'>
    <link rel='stylesheet' href='js/jquery.js'>
    <link rel='icon' src='images/lmd.png'>
  <link rel='stylesheet' type='text/css' href='css/me.css'>
  <link rel='stylesheet' type='text/css' href='css/datepicker.css'>
  <link rel='stylesheet' type='text/css' href='css/bootstrap.css'>

  <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='tinymce/tinymce.min.js'></script>
  <script type='text/javascript' src='js/bootstrap-datepicker.js'></script>

  <script>
$(function() {
    $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
    $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
});
$('.button').click(function() {
    var start = $('#arr_date').datepicker('getDate');
    var end   = $('#dep_date').datepicker('getDate');
    var days   = (end - start)/1000/60/60/24;
    $('#ahir').val(days);
});
</script>

<script>
if (typeof jQuery != 'undefined') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}
</script>
</head>

<p>Choose your dates and hit <em>go</em>.</p>
<input type="text" id="arr_date">
<input type="text" id="dep_date">
    <input type="text" id="hasil">
<button class="button">go</button>

</body>
</html>

我想将差异日期值放在id ='hasil中。我希望你们能解决我的问题。谢谢

Answer 1

您的计算部分没问题，您可以查看jsfiddle：http://jsfiddle.net/3ryy5p4x/

如果您想在hasil作为ID的输入中设置值，正如您在文字中所说的那样，只需设置为$('#hasil').val(days);

工作样本：http://jsfiddle.net/3ryy5p4x/1/

编辑：在你自己的代码中，问题是结构：

您的body开始必须在所有head部分之后！
您指向样式表的链接是引用javascript文件，而不是样式表文件
您没有引用包含datepicker组件的jQUery UI，但是bootstrap-datepicker

更正，使用js文件的CDN引用（文件在网上，从这里：https://code.jquery.com/。如果要在本地使用它们，复制内容并更改引用）：

<!Doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>tugas akhir</title>

        <!-- Here, the files should be CSS, not JS! -->
        <link rel='stylesheet' href='js/jquery-ui.css'>

        <link rel='icon' src='images/lmd.png'>
        <link rel='stylesheet' type='text/css' href='css/me.css'>
        <link rel='stylesheet' type='text/css' href='css/datepicker.css'>
        <link rel='stylesheet' type='text/css' href='css/bootstrap.css'>

        <!-- jQuery, here 1.11.1 version, using minified (min) to have a shorter file -->
        <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.1.min.js'></script>
        <!-- jQuery UI script, for datepicker -->
        <script type='text/javascript' src='https://code.jquery.com/ui/1.11.1/jquery-ui.min.js'></script>

        <script>
            $(function() {
                $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
                $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
            });

            $('.button').click(function() {
                var start = $('#arr_date').datepicker('getDate');
                var end = $('#dep_date').datepicker('getDate');
                var days = (end - start)/1000/60/60/24;
                $('#hasil').val(days);
            });
        </script>

        <script>
            if (typeof jQuery != 'undefined') {
                alert("jQuery library is loaded!");
            } else {
                alert("jQuery library is not found!");
            }
        </script>
    </head>
    <body style='background:white;'>
        <p>Choose your dates and hit <em>go</em>.</p>
        <input type="text" id="arr_date" />
        <input type="text" id="dep_date" />
        <input type="text" id="hasil" />
        <button class="button">go</button>
    </body>
</html>

两个日期之间的Jquery datepicker计数差异不会起作用

1 个答案: