use ember-cli-boostrap-datepicker

app/controllers/create/options.js

@@ -70,6 +70,27 @@ export default Ember.ObjectController.extend(EmberValidations.Mixin, {
     return (givenOptions.length - filtedOptions.length) >= requiredOptionsLength;
   }.property('options.@each.title', 'isDateTime'),
 
+  /*
+   * maps optionsDates for bootstrap datepicker as a simple array of date objects
+   */
+  optionsBootstrapDatepicker: function(key, value, previousValue) {
+    // setter
+    if (arguments.length > 1) {
+      this.set('optionsDates',
+        value.map(function(item){
+          return {
+            title: item
+          };
+        })
+      );
+    }
+
+    // getter
+    return this.get('optionsDates').map(function(item){
+      return item.title;
+    });
+  }.property('optionsDates'),
+
   validations: {
     enoughOptions: {
       acceptance: {
@@ -83,4 +104,4 @@ export default Ember.ObjectController.extend(EmberValidations.Mixin, {
       }
     }
   }
-});
+});

app/templates/create/options.hbs

@@ -27,7 +27,12 @@
   {{#if isFindADate}}
     
     <div id="datepicker">
-      {{view 'datepicker'}}
+      {{bootstrap-datepicker-inline
+          value=optionsBootstrapDatepicker
+          multidate=true
+          calendarWeeks=true
+          todayHighlight=true
+          language=language.selected}}
     </div>
       
     {{#form-wrapper}}

app/views/create/options.js

@@ -7,6 +7,6 @@ export default Ember.View.extend({
       this.get('controller.optionsTexts').pushObject({
         'value': ''
       });
-   }
+    }
   }
-});
+});

app/views/datepicker.js

@@ -1,45 +0,0 @@
-import Ember from "ember";
-
-export default Ember.View.extend({
-  classNames: ['datepicker'],
-
-  didInsertElement: function() {
-    var self = this,
-        selectedDates = [];
-
-    this._super();
-
-    Ember.$('.datepicker').datepicker({
-      format: "yyyy-mm-dd hh:mm:ss",
-      multidate: true,
-      multidateSeparator: ";",
-      calendarWeeks: true,
-      todayHighlight: true,
-      language: this.get('controller.language.selected')
-    })
-    // bind date changes to dates option array in model
-    .on('changeDate', function(e){
-      var dates = e.dates,
-          newDates = [];
-
-      // get array in correct form
-      dates.forEach(function(option) {
-        newDates.pushObject({title: option});
-      });
-
-      // set options
-      self.set('_parentView.controller.optionsDates', newDates);
-    });
-    
-    // get selected dates in a simple array of date objects
-    this.get('controller.optionsDates').forEach(function(date){
-      console.log(date.title);
-      selectedDates.push( new Date(date.title) );
-    });
-    
-    if(selectedDates.length > 0) {
-      // set selected dates on init
-      Ember.$('#' + this.elementId).datepicker('setDates', selectedDates);
-    }
-  }
-});

bower.json

@@ -15,7 +15,7 @@
     "ember-i18n": "~3.0.1",
     "sjcl": "~1.0.0",
     "bootstrap": "~3.3.4",
-    "bootstrap-datepicker": "~1.3.0",
+    "bootstrap-datepicker": "~1.4.0",
     "moment": "~2.8.3",
     "floatThead": "~1.2.9",
     "webshim": "~1.15.3",

package.json

@@ -27,6 +27,7 @@
     "ember-cli": "0.2.2",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-babel": "^4.0.0",
+    "ember-cli-bootstrap-datepicker": "git://github.com/soulim/ember-cli-bootstrap-datepicker.git#5cc3fdf114cece954cbb4af60c5584e362c1cdc3",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "0.0.8",
     "ember-cli-htmlbars": "0.7.4",