This issue can be solved using the noConflict method of bootstrap-datepicker
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
You can just do $.fn.datepicker.noConflict() which replaces the bootstrap datepicker with the older datepicker which was present, in this case jQuery UI.
For those who wants to keep both datepickers, you can do something along the following:
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
after which you’ll be able to initialize jQuery UI datepicker using datepicker() method, and bootstrap one using bootstrapDP()
Side note: Make sure you load bootstrap datepicker after jquery ui so that we can use it’s noConflict()
$(function() {
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
$("#jquery-ui-datepicker").datepicker({});
$('#bootstrap-datepicker').bootstrapDP({});
});#left {
width: 50%;
float: left;
}
#bootstrap-datepicker {
width: 50%;
float: right;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<div id="left">
<p>Date:
<input type="text" id="jquery-ui-datepicker">
</p>
</div>
<div id="bootstrap-datepicker" class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>