Bootstrap Datetimepicker not working MVC 4

Question

I have been tryng to use this datetimepicker 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.

Here is what i have now:

View

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

Looks like you are loading your scripts multiple times. Once using `@Scripts` and then again with the ` — Igor, Apr 07 '16 at 10:56
Also see [this previous answer](http://stackoverflow.com/a/35962728/1260204) for a complete fragment you could copy/paste to test with. — Igor, Apr 07 '16 at 10:58
That has fixed the issue however small question the calendar symbol is spaced away from the input box any idea on why this may be — JH_Dev, Apr 07 '16 at 11:03
Most likely because you do not have a link above to the bootstrap css file but maybe its included in the `@Styles` link above? Or your datetime picker CSS is the standalone version that also includes the bootstrap info and overwrites some of the bootstrap styles. — Igor, Apr 07 '16 at 11:07
inspect the element and see what styles are being applied by which file.. you will be able to fix it then — Rajshekar Reddy, Apr 07 '16 at 12:03
can you post a picture of your view? I just had a similar problem, so I need to see what yours looks like to see if it was the same. — Grizzly, Apr 07 '16 at 12:31
okay so that happened to me.. what happens if you try to change the `col-sm-6` to `col-sm-3` or `col-sm-2`? — Grizzly, Apr 07 '16 at 12:44
Or you can change the width of the field. so `
` or something along those lines — Grizzly, Apr 07 '16 at 12:52
glad i could help. I posted the answer just to give a bigger view of what I was trying to explain — Grizzly, Apr 07 '16 at 13:02

score 2 · Accepted Answer · edited Nov 19 '16 at 08:02

In reference to addressing your second issue with the calendar glyphicon being spaced apart from the input you need to do either of these (your preference):

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

OR:

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

Also just a nit picky thing.. try to keep your Scripts and Styles together and not mixed between each other.. makes for easier reading.

score 0 · Answer 2 · answered Feb 07 '17 at 07:40

The js script "bootstrap-datetimepicker" requires Moment.js and Jquery.js to be loaded first.

   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"));

Bootstrap Datetimepicker not working MVC 4

2 Answers2