BootStrap DatePicker NoConflict

问题

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

bootstrap datepicker can use noConflict now:

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()?

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.

Below is my code:

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>

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

回答1:

You missed the parens on the noConflict function.

Code:

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

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

回答2:

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

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

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

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

回答3:

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

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

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

来源：https://stackoverflow.com/questions/18507908/bootstrap-datepicker-noconflict

标签

jquery

twitter-bootstrap

datepicker