Integrate with bootstrap-select so that select fields look more in line with Bootstrap.

Author: lowjoel

README.md

@@ -4,11 +4,14 @@ Integrating Bootstrap-looking form controls with Simple Form.
 
 ## Installation
 
- 1. Add to your application's Gemfile: `gem 'simple_form-bootstrap'`
+ 1. Add to your application's Gemfile: `gem 'simple_form-bootstrap'`. The following types of
+    input controls are supported, so long they are properly installed in your application. Ensure
+    that the control is included in your `application.js` _before_ the Simple Form-Bootstrap
+    JavaScript.
 
     a. If you want to use Date/Time pickers, install the `bootstrap3-datetimepicker-rails` gem.
-       Ensure that the picker is initialised in the JavaScript _before_ the Simple Form-Bootstrap
-       JavaScript.
+    b. If you want to use the nicely styled Bootstrap Select picker, install the
+       `bootstrap-select-rails` gem.
 
  2. Add to your application's javascript: `//= require simple_form-bootstrap`
  3. Create a new initializer:

app/assets/javascripts/simple_form-bootstrap.js

@@ -6,11 +6,15 @@
     // Enable our date/time pickers
     var datePickers = $('input.bootstrap-datepicker', node);
     datePickers.datetimepicker();
+
+    // Enable our styled Bootstrap select controls, except Twitter Typeahead controls.
+    var selects = $('select.form-control:not(.typeahead)', node);
+    selects.selectpicker();
   }
 
   $(document).on('ready', function(e) {
     initializeComponents(document);
-  })
+  });
   $(document).on('DOMNodeInserted', function(e) {
     initializeComponents(e.target);
   });

app/assets/javascripts/simple_form-bootstrap/select_input.js

@@ -0,0 +1,12 @@
+// Hijacks the default Bootstrap date-time picker to always format dates in the specified format
+// through the use of a hidden field.
+(function($) {
+  'use strict';
+  if ($.fn.selectpicker) {
+    return;
+  }
+
+  $.fn.selectpicker = function(arg) {
+    return methods.initialise.call(this, arg);
+  };
+}(jQuery));