BootStrap DatePicker NoConflict

Question

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?

Answer 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/

Answer 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.