Bootstrap datepicker not working correctly

Question

in my webapp I'm using bootstrap components; in one of my pages I'm trying to put a bootstrap datepicker, or better a datetimepicker, still with no luck.

My css and js imports are (in order):

bootstrap.css
datepicker.css
jquery.js
bootstrap.js
bootstrap-datepicker.js

The code I'm writing is:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    <input data-format="dd/MM/yyyy hh:mm:ss" type='text' class="form-control" id='datetimepicker2' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#datetimepicker2').datetimepicker();
            });
        </script>
    </div>
</div>

But i tried lot of combinations of the script (avoiding the document ready function call and just calling the function), setting the 'datetimepicker2' id both on div and input, always with no luck.

When I try my datepicker nothing happens, and in the console I always get the:

uncaught typeerror undefined is not a function

error on the line:

$('#datetimepicker2').datetimepicker();

I have searched along the web and I'm not the only one having this problem, lot of people solved putting in the div class the 'date', but that didn't do the trick for me. Other people suggested to import jQueryUI too, but still no luck. Any hint?

You loaded bootstrap-datepicker.js and tried to use datetimepicker . Is that it? — f p
– f p, Commented Nov 20, 2014 at 18:22
It seems that you are missing moment.js...Working fiddle: jsfiddle.net/0n2ok61a — Hackerman
– Hackerman, Commented Nov 20, 2014 at 18:27
that is certainly one of the problems, as if i put datepicker it works like a charme, but if i import datetimepicker.js and try to call a datetimepicker it still does not work. @RobertRozas what do you mean by moment.js? — lateralus
– lateralus, Commented Nov 20, 2014 at 18:32
Still no luck. DatePicker works fine while datetimepicker does not. I imported moment.js and in the js folder i created a locales folder with mylanguage.js inside, but still not working. — lateralus
– lateralus, Commented Nov 20, 2014 at 19:04

jatinkumar patel · Accepted Answer · 2014-11-20 18:28:06Z

3

It seems a jquery conflicts. Cehck your jquery version and required jquery version for bootstrap datepicker, or may be you have imported two jquery versions in html page.

answered Nov 20, 2014 at 18:28

jatinkumar patel

3,00023 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nisarg Shah Over a year ago

I know I am late to add something to this comment, but the answer does not helps directly to resolve the issue.

Nisarg Shah · Accepted Answer · 2015-04-24 07:05:20Z

<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>
    <script type="text/javascript">
      $(function() {
        $('#datetimepicker1').datetimepicker();
      });
    </script>
  </div>
</div>

The above snippet is all we need but there is only 1 more line which needs to be added. And that is in the scripts tag. Copy the div code from above and script section from below.

$.noConflict();
$(function() {
  $('#datetimepicker1').datetimepicker();
});

I hope this answers your question clearly....

Code courtsey: http://eonasdan.github.io/bootstrap-datetimepicker/

Collectives™ on Stack Overflow

Bootstrap datepicker not working correctly

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related