title: Eonasdan DateTimePicker for bootstrap 3 not working
body: <p>I'm trying to use <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">this</a> datetimepicker for my Asp.Net MVC 5 project. The project uses default Bootstrap3 layout. The github project for this datetimepicker can be found <a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow noreferrer">here</a>.</p>
  
  <p>As mentioned is site I've incuded the the js and css file in my view.</p>
  
  <p>for my datetimepicker i have copied the exact code from the site</p>
  
  <pre><code>@{
      ViewBag.Title = "CreateAppointment_SetDate";
      Layout = "~/Views/Shared/_Layout.cshtml";
      @Scripts.Render("~/Scripts/jquery.min.js")
      @Scripts.Render("~/Scripts/moment.min.js")
      @Scripts.Render("~/Scripts/Bootstrap/transition.js")
      @Scripts.Render("~/Scripts/Bootstrap/collapse.js")
      @Scripts.Render("~/Scripts/bootstrap.min.js")
      @Scripts.Render("~/Scripts/bootstrap-datetimepicker.min.js")
      &lt;link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css"/&gt;
  
  }
  
      &lt;div class="col-md-10"&gt;
          &lt;div class='well'&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;script type="text/javascript"&gt;
              $(function () {
                  $('#datetimepicker1').datetimepicker();
              });
          &lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and this is what i see in view
  <img src="https://i.stack.imgur.com/Z9B78.png" alt="enter image description here"></p>
  
  <p>The problem is when i click the calender icon, nothing happens. No datetimepicker, and the calendar icon is not clickable. In the console it says <code>Bootstrap requires jQuery</code> but there in network i can see jquery being loaded. </p>
  
  <p>Can anyone suggest what the problem is?</p>
  
  <p><strong>Edit1:</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "CreateAppointment_SetDate";
      Layout = "~/Views/Shared/_Layout.cshtml";
      @Scripts.Render("~/Scripts/jquery-2.1.0.min.js")
      &lt;script src="~/Scripts/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/moment.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet"/&gt;
  }
  
  
  
      @Html.HiddenFor(m=&gt;m.AppointmentId)
      &lt;h3&gt;When should appointment take place?&lt;/h3&gt;
      &lt;h4&gt;Please select the date range for the appointment to take place between&lt;/h4&gt;
      &lt;h6&gt;Please select a start date&lt;/h6&gt;
  
      &lt;div class="col-md-10"&gt;
          &lt;div class='well'&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class='input-group date' id='datetimepicker2'&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;script type="text/javascript"&gt;
              $(function () {
                  $('#datetimepicker2').datetimepicker();
              });
          &lt;/script&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/hjCNs.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/K94o1.png" alt="enter image description here"></p>
  
  <p><strong>Edit2</strong> </p>
  
  <p>the jquery.min.js is the file i got from the site, I looked the sites network copied the jquery.min.js file link and added to my project. When I comment  <code>@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")</code> line: </p>
  
  <pre><code>@{
      ViewBag.Title = "CreateAppointment_SetDate";
      Layout = "~/Views/Shared/_Layout.cshtml";
      @*@Scripts.Render("~/Scripts/jquery-2.1.0.min.js")*@
      &lt;script src="~/Scripts/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/moment.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/&gt;
  }
  
  
  
      @Html.HiddenFor(m=&gt;m.AppointmentId)
      &lt;h3&gt;When should appointment take place?&lt;/h3&gt;
      &lt;h4&gt;Please select the date range for the appointment to take place between&lt;/h4&gt;
      &lt;h6&gt;Please select a start date&lt;/h6&gt;
      &lt;div class ="container"&gt;
          &lt;div class="col-md-10"&gt;
              &lt;div class='well'&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class='input-group date' id='datetimepicker2'&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;script type="text/javascript"&gt;
                  $(function () {
                      $('#datetimepicker2').datetimepicker();
                  });
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In console:
  <img src="https://i.stack.imgur.com/DpEih.png" alt="enter image description here"></p>
  
  <p>Edit 2 with commenting <code>@*&lt;script src="~/Scripts/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;*@</code> line
  <img src="https://i.stack.imgur.com/Vj7vF.png" alt="enter image description here"></p>