[Time Conductor] Add date-time field

Add mct-control which includes both the date-time picker and
its corresponding text entry area, per code review feedback
from nasa/openmctweb#204.

platform/commonUI/general/bundle.json

@@ -60,6 +60,11 @@
                 "implementation": "controllers/DateTimePickerController.js",
                 "depends": [ "$scope", "now" ]
             },
+            {
+                "key": "DateTimeFieldController",
+                "implementation": "controllers/DateTimePickerController.js",
+                "depends": [ "$scope", "formatService" ]
+            },
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
@@ -242,6 +247,10 @@
             {
                 "key": "datetime-picker",
                 "templateUrl": "templates/controls/datetime-picker.html"
+            },
+            {
+                "key": "datetime-field",
+                "templateUrl": "templates/controls/datetime-field.html"
             }
         ],
         "licenses": [

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -0,0 +1,20 @@
+<span class="s-btn"
+      ng-controller="DateTimeFieldController">
+    <input type="text"
+           ng-model="textValue"
+           ng-class="{ error: textInvalid }">
+    </input>
+    <a class="ui-symbol icon icon-calendar"
+       ng-if="structure.format === 'utc' || !structure.format"
+       ng-click="pickerActive = !pickerActive">
+    </a>
+    <mct-popup ng-if="pickerActive">
+        <div mct-click-elsewhere="pickerActive = false">
+            <mct-control key="'datetime-picker'"
+                         ng-model="ngModel"
+                         field="field"
+                         options="{ hours: true }">
+            </mct-control>
+        </div>
+    </mct-popup>
+</span>

platform/commonUI/general/src/controllers/DateTimeFieldController.js

@@ -0,0 +1,76 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        var DEFAULT_FORMAT = 'utc';
+
+        /**
+         * Controller to support the date-time entry field.
+         *
+         * Accepts a `format` property in the `structure` attribute
+         * which allows a date/time to be specified via its symbolic
+         * key (as will be used to look up said format from the
+         * `formatService`.)
+         *
+         * {@see FormatService}
+         * @constructor
+         * @memberof platform/commonUI/general
+         */
+        function DateTimeFieldController($scope, formatService) {
+            var formatter = formatService.getFormat(DEFAULT_FORMAT);
+
+            function setFormat(format) {
+                formatter = formatService.getFormat(format) ||
+                        formatService.getFormat(DEFAULT_FORMAT);
+            }
+
+            function updateFromModel(value) {
+                // Only reformat if the value is different from user
+                // input (to avoid reformatting valid input while typing.)
+                if (!formatter.validate($scope.textValue) ||
+                        formatter.parse($scope.textValue) !== value) {
+                    $scope.textValue = formatter.format(value);
+                    $scope.textInvalid = false;
+                }
+            }
+
+            function updateFromView(textValue) {
+                $scope.textInvalid = !formatter.validate(textValue);
+                if (!$scope.textInvalid) {
+                    $scope.ngModel[$scope.field] =
+                        formatter.parse(textValue);
+                }
+            }
+
+            $scope.$watch('structure.format', setFormat);
+            $scope.$watch('ngModel[field]', updateFromModel);
+            $scope.$watch('textValue', updateFromView);
+        }
+
+        return DateTimeFieldController;
+    }
+);