diff --git a/src/js/bootstrap-datetimepicker.js b/src/js/bootstrap-datetimepicker.js
index 591bf42a5..6ffbb24e1 100644
--- a/src/js/bootstrap-datetimepicker.js
+++ b/src/js/bootstrap-datetimepicker.js
@@ -54,8 +54,9 @@
       this.pickTime = options.pickTime;
       this.isInput = this.$element.is('input');
       this.component = false;
+      this.componentSelector = options.componentSelector;
       if (this.$element.find('.input-append') || this.$element.find('.input-prepend'))
-          this.component = this.$element.find('.add-on');
+          this.component = this.$element.find(this.componentSelector);
       this.format = options.format;
       if (!this.format) {
         if (this.isInput) this.format = this.$element.data('format');
@@ -266,16 +267,16 @@
       offset.top = offset.top + this.height;
 
       var $window = $(window);
-      
+
       if ( this.options.width != undefined ) {
         this.widget.width( this.options.width );
       }
-      
+
       if ( this.options.orientation == 'left' ) {
         this.widget.addClass( 'left-oriented' );
         offset.left   = offset.left - this.widget.width() + 20;
       }
-      
+
       if (this._isInFixed()) {
         position = 'fixed';
         offset.top -= $window.scrollTop();
@@ -972,7 +973,7 @@
             expanded.collapse('hide');
             closed.collapse('show')
             $this.find('i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
-            self.$element.find('.add-on i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
+            self.$element.find(this.componentSelector + ' i').toggleClass(self.timeIcon + ' ' + self.dateIcon);
           }
         });
       }
@@ -1095,7 +1096,8 @@
     pickSeconds: true,
     startDate: -Infinity,
     endDate: Infinity,
-    collapse: true
+    collapse: true,
+    componentSelector: '.add-on'
   };
   $.fn.datetimepicker.Constructor = DateTimePicker;
   var dpgId = 0;
diff --git a/test/specs.coffee b/test/specs.coffee
index 8497b032b..7692b5193 100644
--- a/test/specs.coffee
+++ b/test/specs.coffee
@@ -341,3 +341,28 @@ describe 'datetimepicker with pickSeconds = false', ->
     expect(@timeWidget.find('[data-action=decrementSeconds]').length).to.equal 0
     expect(@timeWidget.find('.timepicker-second').length) .to.equal 0
 
+describe 'datetimepicker with componentSelector = ".btn-calendar"', ->
+
+  beforeEach setupDateTimePicker({
+    componentSelector: '.btn-calendar'
+    markup:
+      """
+      <div id="datetimepicker" class="input-append date">
+        <input type="text" value="05/01/1905 05:55" data-format="MM/dd/yyyy hh:mm">
+        <buttom class="btn btn-calendar">
+          <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
+        </buttom>
+      </div>
+      """
+  })
+
+  afterEach teardownDateTimePicker()
+
+  it 'pops up the widget when icon is clicked', ->
+    @addon.click()
+    expect(@widget.is ':visible').to.be.true
+
+  it 'hides the widget when clicking outside it', ->
+    @addon.click()
+    $('#mocha').mousedown()
+    expect(@widget.is ':hidden').to.be.true
diff --git a/test/utils.coffee b/test/utils.coffee
index b431b1b86..60fa83700 100644
--- a/test/utils.coffee
+++ b/test/utils.coffee
@@ -15,10 +15,13 @@ setupDateTimePicker = (opts) ->
   if opts?.markup
     markup = opts.markup
     delete opts.markup
+  componentSelector = '.add-on'
+  if opts?.componentSelector
+    componentSelector = opts.componentSelector
   return ->
     @component = $(markup).appendTo($ '#container').datetimepicker(opts)
     @input = @component.find 'input'
-    @addon = @component.find '.add-on'
+    @addon = @component.find componentSelector
     @picker = @component.data 'datetimepicker'
     @widget = $ 'body > .bootstrap-datetimepicker-widget'
     @dateWidget = @widget.find('.datepicker')