jQuery BootStrap DatePicker NoConflict

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18507908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:49:11  来源:igfitidea点击:

BootStrap DatePicker NoConflict

jquerytwitter-bootstrapdatepicker

提问by morgan117

According to the document: https://github.com/eternicode/bootstrap-datepicker#no-conflict

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

bootstrap datepicker can use noConflict now:

bootstrap datepicker 现在可以使用 noConflict:

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

It said "give $().bootstrapDP the bootstrap-datepicker functionality", what does this mean? Does it means I can use $("#object").bootstrapDP()instead of $("#object").datepicker()?

它说“给 $().bootstrapDP bootstrap-datepicker 功能”,这是什么意思?这是否意味着我可以使用$("#object").bootstrapDP()而不是$("#object").datepicker()

I have tried it in firefox (just for test, actually not conflict to any js), but the "date-choose" does not show, and no error appear (from firebug), that is weird.

我已经在 firefox 中尝试过(仅用于测试,实际上与任何 js 都不冲突),但是“日期选择”没有显示,并且没有出现错误(来自 firebug),这很奇怪。

Below is my code:

下面是我的代码:

HTML

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

JS

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

When I replace the script with $("#dp3").datepicker(), the "date-choose" will show. Can anyone tell me how to use noConflict to bootstrap datepicker?

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

采纳答案by Irvin Dominin

You missed the parens on the noConflictfunction.

你错过了noConflict函数的括号。

Code:

代码:

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

Working demo: http://jsfiddle.net/IrvinDominin/faxyz/

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

回答by FastTrack

For anyone who wasn't helped by the accepted answer (like me) see below...

对于那些没有被接受的答案帮助的人(比如我),请参见下文......

Rather than use the jQuery initialization, utilize the data-apiinstantiation like so:

不使用 jQuery 初始化,而是data-api像这样使用实例化:

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

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

This allows you to use the Bootstrap datepicker, without worrying about conflicting with jQuery UI's datepicker.

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

回答by Sopo

Instead of using everything from Jquery UI you can customize the widgets which you want from Jquery UI.

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

In this case, you can remove jquery datepicker and build new files and use them.

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

Use this jquery ui widget builder: https://jqueryui.com/download/

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