title: Bootstrap Datetimepicker not working MVC 4
body: <p>I have been tryng to use this <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">datetimepicker</a> for the last few days and no matter what i try the best i can get is the calendar appearing in the top left hand corner. I cannot find any real tutorials on how to implement the control and past answers on this site havent helped either.</p>
  
  <p>Here is what i have now:</p>
  
  <p>View</p>
  
  <pre><code>@Scripts.Render("~/Scripts/knockout-3.4.0.js")
  @Scripts.Render("~/Scripts/jquery-1.10.2.js")
  @Scripts.Render("~/bundles/bootstrap")
  @Styles.Render("~/Content/css")
  &lt;script type="text/javascript" src="/Scripts/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/moment.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" /&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class='col-sm-6'&gt;
        &lt;div class="form-group"&gt;
          &lt;div class='input-group date' id='datetimepicker1'&gt;
            &lt;input type='text' class="form-control" /&gt;
            &lt;span class="input-group-addon"&gt;
                                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $(function() {
      $('#datetimepicker1').datetimepicker();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vORx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vORx3.png" alt="image of view"></a></p>