[Forms] Date time controls

Implement date time controls up to the point that
they validate, and information (albeit not the right
information) propagates back up to the containing
form. WTD-530.

platform/forms/bundle.json

@@ -31,6 +31,13 @@
                 "templateUrl": "templates/controls/textfield.html"
             }
         ],
+        "controllers": [
+            {
+                "key": "DateTimeController",
+                "implementation": "controllers/DateTimeController.js",
+                "depends": [ "$scope" ]
+            }
+        ],
         "templates": [
             {
                 "key": "_checkbox",

platform/forms/res/templates/controls/datetime.html

@@ -1,4 +1,5 @@
 <div class='form-control complex datetime'>
+
     <div class='field-hints'>
         <span class='hint date'>Date</span>
         <span class='hint time sm'>Hour</span>
@@ -7,22 +8,43 @@
         <span class='hint timezone'>Timezone</span>
     </div>
 
-    <div class='fields'>
+
+    <ng-form name="mctControl">
+        <div class='fields' ng-controller="DateTimeController">
             <span class='field control date'>
-            <input type='text' name='date' />
+                <input type='text'
+                       name='date'
+                       placeholder="YYYY-DDD"
+                       ng-pattern="/\d\d\d\d-\d\d\d/"
+                       ng-model='datetime.date'
+                       ng-required='true'/>
             </span>
             <span class='field control time sm'>
-            <input type='text' name='hour' maxlength='2' />
+                <input type='text'
+                       name='hour'
+                       maxlength='2'
+                       ng-model="datetime.hour"
+                       ng-required='true'/>
             </span>
             <span class='field control time sm'>
-            <input type='text' name='min' maxlength='2' />
+                <input type='text'
+                       name='min'
+                       maxlength='2'
+                       ng-model="datetime.min"
+                       ng-required='true'/>
             </span>
             <span class='field control time sm'>
-            <input type='text' name='sec' maxlength='2' />
+                <input type='text'
+                       name='sec'
+                       maxlength='2'
+                       ng-model="datetime.sec"
+                       ng-required='true'/>
             </span>
             <span class='field control timezone'>
                 UTC
             </span>
         </div>
-</div>
+    </ng-form>
+
+
 </div>

platform/forms/src/controllers/DateTimeController.js

@@ -0,0 +1,34 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+
+        function DateTimeController($scope) {
+
+            function update() {
+                var date = $scope.datetime.date,
+                    hour = $scope.datetime.hour,
+                    min = $scope.datetime.min,
+                    sec = $scope.datetime.sec;
+
+                $scope.ngModel[$scope.field] = [
+                    date,
+                    hour,
+                    min,
+                    sec
+                ].join(".");
+            }
+
+            $scope.$watch("datetime.date", update);
+            $scope.$watch("datetime.hour", update);
+            $scope.$watch("datetime.min", update);
+            $scope.$watch("datetime.sec", update);
+
+            $scope.datetime = {};
+        }
+
+        return DateTimeController;
+
+    }
+);