CODEWITHSUNDEEP
jquery
Firnas
Firnas

Reputation: 389

Jquery Datepicker not working for Bootstrap 3

I've embed a jquery datepicker in the input field, but it isn't displaying it. But when I erase cdn link for jquery and embed the datepicker cdn then it working fine, but I have a modal also but the modal is not working if I erase the bootstrap cdn for jquery and place the datepicker cdn jquery. Either one of them work only when there is a specific cdn.

This is the bootstrap jquery cdn code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

This is the default cdn code. Now when I click my modal then it opens

But When I insert 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Now the modal works but the date picker doesn't work but when I erase the bootsrap cdn then the datepicker works fine but then again the modal doesn't work because of missing the bootstrap jquery cdn.

This is the Datepicker code:

<input type="text" id="datepicker" placeholder="DD/MM/YYYY">
$(function(){
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '&rarr;',
        //prevText: '&larr;',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
    });
});

Upvotes: 1

Views: 4897

Answers (1)

Artem
Artem

Reputation: 3700

Jquery UI v. 1.8.18 will not work with jQuery 1.9 or higher (because jquery.browser is deprecated in jQuery 1.9)

Bootstrap 3 will require minimum Jquery 1.9.1

As workaround, you need to include jQuery with jquery-migrate

Link to sample

HTML

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<input type="text" id="datepicker" placeholder="DD/MM/YYYY"/>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript

$(function () {
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '→',
        //prevText: '←',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
    });
});

Actually, you may get more compatibility issues for jQuery UI and bootstrap - consider using jquery-ui-bootstrap.

Upvotes: 1

Related Questions