keys ui WIP

static/js/directives/ui/datetime-picker.js

@@ -0,0 +1,51 @@
+/**
+ * An element which displays a datetime picker.
+ */
+angular.module('quay').directive('datetimePicker', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/datetime-picker.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'datetime': '=datetime',
+    },
+    controller: function($scope, $element) {
+       $scope.entered_datetime = null;
+
+       $(function() {
+         $element.find('input').datetimepicker({
+           'format': 'LLL',
+           'sideBySide': true,
+           'showClear': true
+         });
+
+         $element.find('input').on("dp.change", function (e) {
+            $scope.datetime = e.date ? e.date.unix() : null;
+         });
+       });
+
+       $scope.$watch('entered_datetime', function(value) {
+         if (!value) {
+           if ($scope.datetime) {
+             $scope.datetime = null;
+           }
+           return;
+         }
+
+         $scope.datetime = (new Date(value)).getTime()/1000;
+       });
+
+       $scope.$watch('datetime', function(value) {
+         if (!value) {
+           $scope.entered_datetime = null;
+           return;
+         }
+
+         $scope.entered_datetime = moment.unix(value).format('LLL');
+       });
+    }
+  };
+  return directiveDefinitionObject;
+});