代码之家 › 专栏 › 技术社区 › Romi Naufal

两个日期之间的Jquery日期选择器计数差异不起作用

date-arithmetic datepicker jquery

Romi Naufal · 技术社区 · 11 年前

目的是计算两个日期之间的差异我仍然不明白为什么它不起作用,因为我从别人的教程中写了一段代码。

<!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中。我希望你们能帮我解决问题。非常感谢。

1 回复 | 直到 11 年前

Nicolas R 11 年前

您的计算部分正常,您可以使用jsfiddle进行检查: http://jsfiddle.net/3ryy5p4x/

如果要在输入中设置具有 hasil 正如您在文本中所说的那样,只需这样设置 $('#hasil').val(days);

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

编辑:在您自己的代码中,问题在于结构:

你的 body 开始必须在所有 head 部分
指向样式表的链接引用的是javascript文件,而不是样式表文件
您没有引用包含日期选择器组件的jQUery UI,但是 bootstrap-datepicker

更正,对js文件使用CDN引用(文件在web上,从这里开始: 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>