webshim polyfill for html5 input time element

app/controllers/create/options-datetime.js

@@ -33,6 +33,10 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
           value: ''
         });
       });
+
+      // update polyfill used for legacy support of html5 input time after new form elements have been insert
+      // has to wait after dom is updated
+      Ember.run.next(this, function() { $('input[type=time]').updatePolyfill(); });
     },
     
     /*

app/index.html

@@ -59,6 +59,9 @@
     <script src="/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
     <script src="/vendor/moment/moment.js"></script>
 
+    <script src="/vendor/modernizr/modernizr.js"></script>
+    <script src="/vendor/webshim/js-webshim/dev/polyfiller.js"></script>
+
   <!-- endbuild -->
 
   <!-- build:js(tmp/result) assets/app.min.js -->
@@ -122,6 +125,8 @@
   <!-- @if tests=false -->
   <script>
     window.App = require('croodle/app')['default'].create(ENV.APP);
+
+    webshim.polyfill('forms-ext');
   </script>
   <!-- @endif -->
 

app/templates/create/options-datetime.hbs

@@ -10,7 +10,7 @@
             {{#each time in datetime.contents.times}}
               <td>
                 <div class="form-group">
-                  {{input value=time.value type="time" class="form-control"}}
+                  {{input value=time.value type="time" class="form-control" step="900"}}
                 </div>
               </td>
             {{/each}}
@@ -19,7 +19,7 @@
       </tbody>
     </table>
 
-    {{em-form-control-help text="Hours and minutes have to be seperated by a color (e.g. 8:05).
+    {{em-form-control-help text="Hours and minutes have to be seperated by a color (e.g. 12:30).
                                  You have to enter atleast one valid time for each date."}}
 
     <div class="form-group">

app/views/create/options-datetime.js

@@ -0,0 +1,14 @@
+export default Em.View.extend({
+    didInsertElement: function(){
+        this._super();
+
+        webshim.setOptions("forms-ext", {
+            "time": {
+                "nopicker": true,
+                "calculateWidth": false
+            }
+        });
+
+        this.$().updatePolyfill();
+    }
+});

bower.json

@@ -18,7 +18,9 @@
     "bootstrap": "~3.2.0",
     "bootstrap-datepicker": "~1.3.0",
     "ember-forms": "f6456c334a07950365ecfebd087596dedc1bdec5",
-    "floatThead": "~1.2.8"
+    "floatThead": "~1.2.8",
+    "webshim": "~1.15.3",
+    "modernizr": "~2.8.3"
   },
   "resolutions": {
     "ember": "~1.7.0",