Add support for inline mode

Author: soulim

README.md

@@ -1,10 +1,10 @@
-# Ember CLI datepicker
+# Ember CLI datepicker add-on
 
 [![Build Status](https://travis-ci.org/soulim/ember-cli-bootstrap-datepicker.svg?branch=master&style=flat)](https://travis-ci.org/soulim/ember-cli-bootstrap-datepicker)
 
-The addon provides you a `bootstrap-datepicker` input component. It can be used in Ember CLI applications.
+The add-on provides you a date input component based on amazing bootstrap-datepicker library. It supports popup and inline mode, and can be used in Ember CLI applications.
 
-The input component is based on [bootstrap-datepicker library](https://github.com/eternicode/bootstrap-datepicker).
+[Online demo](http://sul.im/ember-cli-bootstrap-datepicker)
 
 ## Installation
 
@@ -29,6 +29,12 @@ Basic example:
 {{bootstrap-datepicker value=expiresAt}}
 ```
 
+Use separate component for inline mode:
+
+```handlebars
+{{bootstrap-datepicker-inline value=expiresAt}}
+```
+
 The component supports many options of the bootstrap-datepicker library. Let me show you how to use them :sparkles:
 
 ### Available options
@@ -193,6 +199,11 @@ Default: `0` (Sunday)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create a new Pull Request
 
+## Credits
+
+The add-on is based on [bootstrap-datepicker](https://github.com/eternicode/bootstrap-datepicker).
+
+
 ## License
 
 [MIT License](https://github.com/soulim/ember-cli-bootstrap-datepicker/blob/master/LICENSE.md)

addon/components/bootstrap-datepicker-inline.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import DatepickerSupport from 'ember-cli-bootstrap-datepicker/components/datepicker-support';
+
+export default Ember.Component.extend(DatepickerSupport, {
+  tagName: 'div'
+});

addon/components/bootstrap-datepicker.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
+import DatepickerSupport from 'ember-cli-bootstrap-datepicker/components/datepicker-support';
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(DatepickerSupport, {
   instrumentDisplay: '{{input type="text"}}',
 
   classNames: ['ember-text-field'],
@@ -37,51 +38,5 @@ export default Ember.Component.extend({
     'type'
   ],
 
-  type: 'text',
-
-  value: null,
-
-  setupBootstrapDatepicker: function() {
-    var self = this,
-        element = this.$(),
-        value = this.get('value');
-
-    element.
-      datepicker({
-        autoclose: this.get('autoclose'),
-        calendarWeeks: this.get('calendarWeeks'),
-        clearBtn: this.get('clearBtn'),
-        daysOfWeekDisabled: this.get('daysOfWeekDisabled'),
-        endDate: this.get('endDate'),
-        forceParse: this.get('forceParse'),
-        format: this.get('format'),
-        keyboardNavigation: this.get('keyboardNavigation'),
-        language: this.get('language'),
-        minViewMode: this.get('minViewMode'),
-        orientation: this.get('orientation'),
-        startDate: this.get('startDate'),
-        startView: this.get('startView'),
-        todayBtn: this.get('todayBtn'),
-        todayHighlight: this.get('todayHighlight'),
-        weekStart: this.get('weekStart')
-      }).
-      on('changeDate', function(event) {
-        Ember.run(function() {
-          self.didSelectDate(event);
-        });
-      });
-
-    if (value) {
-      element.datepicker('update', new Date(value));
-    }
-  }.on('didInsertElement'),
-
-  teardownBootstrapDatepicker: function() {
-    this.$().datepicker('remove');
-  }.on('willDestroyElement'),
-
-  didSelectDate: function() {
-    var date = this.$().datepicker('getUTCDate');
-    this.set('value', date.toISOString());
-  }
+  type: 'text'
 });

addon/components/datepicker-support.js

@@ -0,0 +1,54 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  value: null,
+
+  setupBootstrapDatepicker: function() {
+    var self = this,
+        element = this.$(),
+        value = this.get('value');
+
+    element.
+      datepicker({
+        autoclose: this.get('autoclose'),
+        calendarWeeks: this.get('calendarWeeks'),
+        clearBtn: this.get('clearBtn'),
+        daysOfWeekDisabled: this.get('daysOfWeekDisabled'),
+        endDate: this.get('endDate'),
+        forceParse: this.get('forceParse'),
+        format: this.get('format'),
+        keyboardNavigation: this.get('keyboardNavigation'),
+        language: this.get('language'),
+        minViewMode: this.get('minViewMode'),
+        orientation: this.get('orientation'),
+        startDate: this.get('startDate'),
+        startView: this.get('startView'),
+        todayBtn: this.get('todayBtn'),
+        todayHighlight: this.get('todayHighlight'),
+        weekStart: this.get('weekStart')
+      }).
+      on('changeDate', function(event) {
+        Ember.run(function() {
+          self.didChangeDate(event);
+        });
+      });
+
+    if (value) {
+      element.datepicker('update', new Date(value));
+    }
+  }.on('didInsertElement'),
+
+  teardownBootstrapDatepicker: function() {
+    this.$().datepicker('remove');
+  }.on('willDestroyElement'),
+
+  didChangeDate: function(event) {
+    var isoDate = null;
+
+    if (event.date) {
+      isoDate = this.$().datepicker('getUTCDate').toISOString();
+    }
+
+    this.set('value', isoDate);
+  }
+});

app/components/bootstrap-datepicker-inline.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+import BootstrapDatepickerInlineComponent from 'ember-cli-bootstrap-datepicker/components/bootstrap-datepicker-inline';
+
+export default BootstrapDatepickerInlineComponent;

tests/dummy/app/styles/app.css

@@ -9,7 +9,7 @@ body {
   padding-bottom: 20px;
 }
 
-.panel-footer pre {
+.panel-heading pre {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;