更新时间:2023-01-29 20:31:38
可以使用 noConflict
方法" rel ="noreferrer"> bootstrap-datepicker
$.fn.datepicker.noConflict = function(){
$.fn.datepicker = old;
return this;
};
您可以执行$.fn.datepicker.noConflict()
,用现有的较旧的日期选择器替换引导日期选择器,在本例中为jQuery UI.
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;
}
之后,您可以使用datepicker()
方法初始化jQuery UI datepicker,并使用bootstrapDP()
after which you'll be able to initialize jQuery UI datepicker using datepicker()
method, and bootstrap one using bootstrapDP()
旁注:确保在jquery ui之后加载bootstrap datepicker,以便我们可以使用它noConflict()
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>