BootStrap DatePicker NoConflict

Posted 2023-05-07

【中文标题】BootStrap DatePicker NoConflict

【英文标题】：

【发布时间】：2013-09-01 16:58:59

【问题描述】：

根据文档：https://github.com/eternicode/bootstrap-datepicker#no-conflict

bootstrap datepicker 现在可以使用 noConflict：

var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;    // give $().bootstrapDP the bootstrap-datepicker functionality

它说“给 $().bootstrapDP 引导日期选择器功能”，这是什么意思？这是否意味着我可以使用$("#object").bootstrapDP() 而不是$("#object").datepicker()？

我在firefox中试过（只是为了测试，其实和任何js都不冲突），但是“日期选择”没有显示，也没有出现错误（来自firebug），很奇怪。

下面是我的代码：

html

<div class="input-append date" id="dp3" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text"  readonly><span class="add-on"><i class="icon-th"></i></span>
</div>

JS

<script>
  $(function()
    var datepicker = $.fn.datepicker.noConflict;
    $.fn.bootstrapDP = datepicker;  
    $("#dp3").bootstrapDP();    
  );
</script>

当我用$("#dp3").datepicker() 替换脚本时，会显示“日期选择”。 谁能告诉我如何使用 noConflict 来引导 datepicker？

【问题讨论】：

那是您的实际脚本吗？因为您在.noConflict 上缺少()。无论如何，如果您发布小提琴，您的问题会更容易解决。

感谢您的评论和建议。请问为什么我错过paren时firebug控制台（firefox）或IE中没有显示错误？

【参考方案1】：

您错过了 noConflict 函数上的括号。

代码：

$(function()
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;  
    $("#dp3").bootstrapDP();    
);

工作演示：http://jsfiddle.net/IrvinDominin/faxyz/

【讨论】：

请问为什么我错过paren时firebug控制台（firefox）或IE中没有显示错误？

@morgan117：这是因为 javascript 中的函数作为对象工作。将 noConflict 分配给变量在语法上没有任何错误。这与说var datepicker = function() 没有什么不同。您对.bootstrapDP() 的调用最终只是调用了noConflict()，这不会产生任何错误。

谁说这是一个有效的答案 @Irvin Uncaught TypeError: $.fn.datepicker.noConflict is not a function at :2:34 at Object.InjectedScript._evaluateOn (: 895:140) 在 Object.InjectedScript._evaluateAndWrap (:828:34) 在 Object.InjectedScript.evaluate (:694:21)

@Kannu 情况可能不同，我认为如果你再问一个问题会更好

即使使用演示代码，我仍然遇到同样的错误。所以我最终只使用了 JQuery UI 构建器jqueryui.com/download/#!version=1.11.4 并删除了“datepicker”模块，因为我不使用它。这为我解决了问题。

【参考方案2】：

对于没有被接受的答案帮助的人（比如我），请参见下文...

不要使用 jQuery 初始化，而是像这样使用data-api 实例化：

<input type="text" data-provide="datepicker" />

这允许您使用 Bootstrap 日期选择器，而不必担心与 jQuery UI 的日期选择器冲突。

【讨论】：

我需要登录并为这个人投票。谢谢你拯救了我的一天

【参考方案3】：

您可以从 Jquery UI 自定义所需的小部件，而不是使用 Jquery UI 中的所有内容。

在这种情况下，您可以删除 jquery datepicker 并构建新文件并使用它们。

使用这个 jquery ui 小部件构建器：https://jqueryui.com/download/