Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-typeahead

Bootstrap datetime picker plugin is not working?

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="bscripts/bootstrap.js" type="text/javascript"></script>
    <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="Styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <script src="Js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
   <script src="bscripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
         $('#datetimepicker1').datetimepicker();
          });
        </script>
</head>
<body>
    <form id="form1" runat="server">
   <div class="container" style="margin-top:100px;">
    <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>

    </div>
</div>
    </form>
</body>
</html>

This date time picker is not working tough I have included javascript and css of plugin? http://eonasdan.github.io/bootstrap-datetimepicker/#example1 according to this link this must work what's wrong in this code.

Solution

  • You need to add moment.js also before you include the bootstrap-datetimepicker.js file.

    <script src="bscripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="bscripts/bootstrap.js" type="text/javascript"></script>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="bscripts/moment.js" type="text/javascript"></script>
<link href="Styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script src="Js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>

    See the fiddle here.