Search code examples
jquerytwitter-bootstrapbootstrap-datetimepicker

bootstrap datetimepicker not working, displays no javascript errors

I installed Bootstrap Datetimepicker with NuGet as suggested here Below is html code which is not able to display datetimepicker control. From chrome developer tools I found no issues with the loading of scripts or there is any script errors in the console. Any guess why below code not able to display bootstrap datetimepicker

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
         <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
  <script type="text/javascript" src="/scripts/moment.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
  <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
  <!-- include your less or built css files  -->
  <!-- 
  bootstrap-datetimepicker-build.less will pull in "../bootstrap/variables.less" and "bootstrap-datetimepicker.less";
  or-->

</head>
<body>
    <form>
    <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 type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
        </form>
</body>
</html>

Solution

  • Your code works. What you miss is bootstrap CSS. There's supposed to be a calendar icon next to the input that you click to show it. But the calendar would be also unstyled.

    Try to put this on your head: 

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">