Bootstrap datepicker not working correctly

1
votes

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?

2
javascriptjquerycsstwitter-bootstrapdatepicker
You loaded bootstrap-datepicker.js and tried to use datetimepicker . Is that it? - f p
It seems that you are missing moment.js...Working fiddle: jsfiddle.net/0n2ok61a - Hackerman
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
DateTimepicker depends on moment.js ... - Hackerman
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

2 Answers

3
votes

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.

0
votes

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