title: Bootstrap date time picker not working
body: <p>I'm very new to using Javascript and Jquery.
  I want to have a datetimepicker in my page like <a href="http://tarruda.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">here(second example with english language)</a></p>
  
  <p>based upon the example provided in the site I did something like below in my view</p>
  
  <pre><code>@model AdminPortal.Areas.Module.Models.CreateModule
  @{
      ViewBag.Title = "Create";
      Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
  }
  @section Datetime
  {
      &lt;link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.2.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.min.js"&gt;&lt;/script&gt;
  }
  @Html.ValidationSummary(true)
  
  
  &lt;fieldset class="form-horizontal"&gt;
      &lt;legend&gt;Add a Module &lt;small&gt;Create&lt;/small&gt;&lt;/legend&gt;
      @using (Html.BeginForm("Register", "Account", FormMethod.Post))
      {
          @Html.ValidationSummary(true)
          &lt;div class ="controls"&gt;
              &lt;div class="input-block-level"&gt;@Html.TextBoxFor(model =&gt; model.ModuleId, new {@placeholder = "ModuleID"})&lt;/div&gt;
              &lt;br/&gt;
                  &lt;div id="datetimepicker2" class="input-append date"&gt;
                      &lt;input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"&gt;&lt;/input&gt;
                      &lt;span class="add-on"&gt;
                          &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;
                          &lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
  
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function() {
                      $('#datetimepicker2').datetimepicker({
                          format: 'MM/dd/yyyy hh:mm:ss',
                          language: 'en',
                          pick12HourFormat: true
                      });
                  });
              &lt;/script&gt;
          &lt;/div&gt;
  
      }
      &lt;div class="form-actions"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
  
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>this is currently what i get</p>
  
  <p><img src="https://i.stack.imgur.com/zJehK.png" alt="enter image description here"></p>
  
  <p>What's wrong with what I'm doing?
  And how can i pass the value i get here to my controller? </p>
  
  <pre><code>Edit: Rendered web page and source
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/S8BxZ.png" alt="enter image description here"></p>
  
  <p>Page source on browser</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Create&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href="/content/css?v=ET1xq_odr_02rFvcXxOEUbE0fxUwGVELEaefDHmcVCk1" rel="stylesheet"/&gt;
  
  
  
      &lt;link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="/Scripts/jquery-2.0.2.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.min.js"&gt;&lt;/script&gt;
  
             &lt;!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="/scripts/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml"&gt;Sorama&lt;/a&gt;
                      &lt;div class="nav-collapse collapse"&gt;
                          &lt;ul class="nav"&gt;
                              &lt;li class="dropdown"&gt;&lt;a href='#' class='dropdown-toggle' data-toggle='dropdown'&gt;Module &lt;b class='caret'&gt;&lt;/b&gt;&lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a href="/hardware/moduletype/moduletypelist"&gt;Module Type&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/modulekind/modulekindlist"&gt;Module Kind&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/account/login"&gt;Hardware&lt;/a&gt;&lt;/li&gt;&lt;li class="dropdown"&gt;&lt;a href='#' class='dropdown-toggle' data-toggle='dropdown'&gt;Profile &lt;b class='caret'&gt;&lt;/b&gt;&lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a href="/layouts/marketing"&gt;Change Password&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/account/register"&gt;Add User&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="/layouts/signin"&gt;Logout&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                           Welcome demo
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
          &lt;div class="container"&gt;
  
  
  
  
  
  
  &lt;fieldset class="form-horizontal"&gt;
      &lt;legend&gt;Add a Module &lt;small&gt;Create&lt;/small&gt;&lt;/legend&gt;
  &lt;form action="/Hardware/Account/Register" method="post"&gt;        &lt;div class ="controls"&gt;
              &lt;div class="input-block-level"&gt;&lt;input data-val="true" data-val-required="The ModuleId field is required." id="ModuleId" name="ModuleId" placeholder="ModuleID" type="text" value="" /&gt;&lt;/div&gt;
              &lt;br/&gt;
              &lt;div class ="input-block-level"&gt;&lt;select data-val="true" data-val-required="The SelectedModuleTypeName field is required." id="SelectedModuleTypeName" name="SelectedModuleTypeName"&gt;&lt;option value="1"&gt;WebcamType&lt;/option&gt;
  &lt;option value="2"&gt;DMADAQType&lt;/option&gt;
  &lt;option value="3"&gt;ScanMModuleRack&lt;/option&gt;
  &lt;option value="4"&gt;CamModuleRack&lt;/option&gt;
  &lt;option value="5"&gt;MicrophoneArray8X8Type&lt;/option&gt;
  &lt;option value="6"&gt;ManualMotionSystem&lt;/option&gt;
  &lt;option value="7"&gt;AutomaticMotionSystem&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
              &lt;br/&gt;
  
             &lt;div id="datetimepicker2" class="input-append date"&gt;
                      &lt;input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"/&gt;
                      &lt;span class="add-on"&gt;
                          &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
  
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function() {
                      $('#datetimepicker2').datetimepicker({
                          format: 'MM/dd/yyyy hh:mm:ss',
                          language: 'en',
                          pick12HourFormat: true
                      });
                  });
              &lt;/script&gt;
          &lt;/div&gt;
  &lt;/form&gt;    &lt;div class="form-actions"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;a class="btn " href="/Hardware/Module/Index"&gt;Cancel&lt;/a&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;div&gt;
      &lt;a href="/Hardware"&gt;Back to List&lt;/a&gt;
  &lt;/div&gt;
  
              &lt;hr&gt;
              &lt;footer&gt;
                  &lt;p&gt;&amp;copy; Sorama 2013&lt;/p&gt;
              &lt;/footer&gt; 
          &lt;/div&gt;
           &lt;script src="/Scripts/jquery-2.0.2.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-migrate-1.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="/scripts/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/bootstrap.js"&gt;&lt;/script&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>