Bootstrap Datetimepicker не работает MVC 4

Question

Я пытался использовать этот указатель даты и времени в течение последних нескольких дней, и независимо от того, что я стараюсь изо всех сил, это календарь, который появляется в верхнем левом углу. Я не могу найти никаких реальных руководств о том, как реализовать контроль, и прошлые ответы на этом сайте тоже не помогли.

Вот что у меня сейчас:

Посмотреть

@Scripts.Render("~/Scripts/knockout-3.4.0.js")
@Scripts.Render("~/Scripts/jquery-1.10.2.js")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />

<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>

  </div>
</div>

<script>
  $(function() {
    $('#datetimepicker1').datetimepicker();
  });
</script>

Answer 1

В связи с решением вашей второй проблемы, когда глификон календаря отделен от входных данных, вам необходимо выполнить одно из следующих действий (ваши предпочтения):

<div class="row">
  <div class='col-sm-6' /*change this to col-sm-3 or any that is below 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 class="row">
  <div style="width: 25%;/*or something close to that*/" 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>

Также просто придирчивая вещь.. постарайтесь сохранить свой Scripts а также Styles вместе и не смешиваются друг с другом.. облегчает чтение.

Answer 2

Скрипт js "bootstrap-datetimepicker" требует, чтобы Moment.js и Jquery.js были загружены первыми.

   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/bootstrap.min.js",
                    "~/Scripts/moment.js",
                    "~/Scripts/moment.min.js",
                    "~/Scripts/modernizr-2.6.2.js",
                    "~/Scripts/bootstrap-datetimepicker.js"));