Datetime pickers interact with angular model

app/assets/javascripts/admin/order_cycle.js.erb

@@ -108,4 +108,23 @@ angular.module('order_cycle', ['ngResource']).
   factory('Enterprise', function($resource) {
     return $resource('/admin/enterprises/:enterprise_id.json', {},
 		     {'index': { method: 'GET', isArray: true}});
-  });
+  }).
+  directive('datetimepicker', ['$parse', function($parse) {
+    return function(scope, element, attrs) {
+      // using $parse instead of scope[attrs.datetimepicker] for cases
+      // where attrs.datetimepicker is 'foo.bar.lol'
+      $(element).datetimepicker({
+	dateFormat: Spree.translations.date_picker,
+	showOn: "button",
+	buttonImage: "<%= asset_path 'datepicker/cal.gif' %>",
+	buttonImageOnly: true,
+	stepMinute: 15,
+	onSelect: function(dateText, inst) {
+	  scope.$apply(function() {
+	    parsed = $parse(attrs.datetimepicker);
+	    parsed.assign(scope, dateText);
+	  });
+	}
+      });
+    };
+  }]);

app/assets/stylesheets/admin/openfoodweb.css.scss

@@ -28,6 +28,10 @@ form.order_cycle {
   h2 {
     margin-top: 2em;
   }
+  .date-field {
+    float: left;
+    margin-right: 3em;
+  }
   table.exchanges {
     tr td.active {
       width: 20px;

app/views/admin/order_cycles/_form.html.haml

@@ -2,10 +2,12 @@
 = f.text_field :name, 'ng-model' => 'order_cycle.name', 'required' => true
 %br/
 
-= f.label :orders_open_at, 'Orders open'
-= f.text_field :orders_open_at, 'class' => 'datetimepicker', 'ng-model' => 'order_cycle.orders_open_at'
-= f.label :orders_close_at, 'Orders close'
-= f.text_field :orders_close_at, 'class' => 'datetimepicker', 'ng-model' => 'order_cycle.orders_close_at'
+.date-field
+  = f.label :orders_open_at, 'Orders open'
+  = f.text_field :orders_open_at, 'datetimepicker' => 'order_cycle.orders_open_at'
+.date-field
+  = f.label :orders_close_at, 'Orders close'
+  = f.text_field :orders_close_at, 'datetimepicker' => 'order_cycle.orders_close_at'
 %br/