Can't make datepicker bootstrap to work

泄露秘密 提交于 2019-12-25 02:26:28

问题


I copy and paste the first example from this website http://eonasdan.github.io/bootstrap-datetimepicker/ to my own html codes. When I click on the picture beside the textbox, it doesn't pop up the calendar for me to choose

  <!DOCTYPE html>
    <html lang="en">
      <head>

        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      </head>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script>
                $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>
        </div>
    </div>
    </body>
    </html>

Directory and latest code, html codes is in LeaveDemo folder

My bootstrap.min.js

My bootstrap-datepicker.js

Error


回答1:


It seems like you are missing the Datepicker JavaScript library.

Include this and your datepicker should work.




回答2:


You haven't included any js. To make this work you should include bootstrap-datetimepicker.js and bootstrap.min.js




回答3:


Do you make use of Firebug? Do you get any errors? You might also have to include the jQuery library in order to make use of the $() function.




回答4:


Can you perhaps try the following code.

Very basic example that is working.

<!DOCTYPE html>
<html>
    <head>
        <title>Datepicker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
        <link rel="stylesheet" href="css/datepicker.css">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <div class="container">

                <input  type="text" placeholder="Click to show datepicker"  id="datetimepicker1">

        </div>
        <!-- Load jQuery and bootstrap datepicker scripts -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>
        <script type="text/javascript">
            // When the document is ready
            $(document).ready(function () {

                $('#example1').datepicker({
                    format: "dd/mm/yyyy"
                });  

            });
        </script>
    </body>
</html>


来源:https://stackoverflow.com/questions/25177032/cant-make-datepicker-bootstrap-to-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!