jQuery ui datepicker与bootstrap datepicker发生冲突
我想用bootstrap datepicker显示两个月。 在谷歌搜索后，我无法找到如何使用bootstrap datepicker显示多个月。 我发现我可以使用JQuery UI显示多个月。
但问题是：在我的应用程序中，他们使用引导日期选择器。 当我尝试使用JQuery UI datepicker时，Bootstrap datepicker覆盖它，我无法看到JQuery UI datepicker。
您能否建议如何将引导程序datepicker替换为JQuery UI？
我想实现这个目标： http ： //jqueryui.com/datepicker/#multiple-calendars
可以使用bootstrap- noConflict方法解决此问题
$.fn.datepicker.noConflict = function(){ $.fn.datepicker = old; return this; };
您可以执行$.fn.datepicker.noConflict() ，它将引导日期选择器替换为存在的旧日期选择器，在本例中为jQuery UI。
对于那些想要保留两个日期选择器的人，您可以执行以下操作：
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) { var datepicker = $.fn.datepicker.noConflict(); $.fn.bootstrapDP = datepicker; }
之后你将能够使用datepicker()方法初始化jQuery UI datepicker，并使用bootstrapDP()引导一个
旁注：确保在jquery ui之后加载bootstrap datepicker，以便我们可以使用它的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; }
Date:
我发现jQueryUI日历弹出窗口的z-index很低。
试试这个
#ui-datepicker-div{ z-index:350 !important; }
如果使用datepicker，您可以使用bootstrap和jQuery-UI，几乎没有问题。
至少我没有问题，但我有jQuery-UI工作，然后应用bootstrap。 我推荐这种方法。
以下是具有多个月的datepicker的jQuery-UI实现。
$(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); });
现在这是我的jQueryUI实现：
HTML元素：
JS：
$(function() { $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', numberOfMonths:2 }); });
如您所见，我使用类而不是ID，因为在某些页面上我使用多个日期选择器。
为了扩展vic所说的，jQuery UI可以与Bootstrap一起使用，但它可能不值得付出努力。 从SO看到这篇文章：
我可以同时使用Twitter Bootstrap和jQuery UI吗？
您可能会发现此日期选择器有更多选项可以为您提供所需的内容…我不会看到多个日历： http ： //eternicode.github.io/bootstrap-datepicker/
我还会认为jQuery UI的外观和感觉可能看起来与引导程序的外观和感觉不一致，尽管这只是我的看法。
您可以下载自定义jquery-ui脚本，不包括datepicker模块，并将脚本名称从jquery-ui.min.js更改为jqueryuinodatepicker.min.js