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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…