BootStrap DatePicker NoConflict

Question

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

bootstrap datepicker can now use noConflict:

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

He said: "give $ (). BootstrapDP the bootstrap-datepicker function", what does this mean? Does this mean that I can use $("#object").bootstrapDP() instead of $("#object").datepicker() ?

I tried this in firefox (just for a test that does not actually conflict with any js), but the "date-select" does not appear, and the error does not appear (from firebug), which is strange.

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() , "date-select" is displayed. Can someone tell me how to use noConflict to load datepicker?

Answer 1

You missed the parens in the noConflict function.

the code:

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

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

Answer 2

For those who are not helped by the accepted answer (like me), see below ...

Instead of using jQuery initialization, use the data-api instantiation as follows:

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

This allows you to use Bootstrap's date picker without worrying about a conflict with the jQuery UI date picker.

Answer 3

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

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

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