CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
lateralus
lateralus

Reputation: 1020

Bootstrap datepicker not working correctly

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

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?

Upvotes: 1

Views: 3212

Answers (2)

Nisarg Shah
Nisarg Shah

Reputation: 354

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

Upvotes: 0

jatinkumar patel
jatinkumar patel

Reputation: 2990

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.

Upvotes: 3

Related Questions