GUAC-1213: Use HTML5 date/time input types.

guacamole/src/main/webapp/app/form/controllers/dateFieldController.js

@@ -24,9 +24,38 @@
 /**
  * Controller for date fields.
  */
-angular.module('form').controller('dateFieldController', ['$scope',
+angular.module('form').controller('dateFieldController', ['$scope', '$injector',
-    function dateFieldController($scope) {
+    function dateFieldController($scope, $injector) {
 
-    /* STUB */
+    // Required services
+    var $filter = $injector.get('$filter');
+
+    /**
+     * Options which dictate the behavior of the input field model, as defined
+     * by https://docs.angularjs.org/api/ng/directive/ngModelOptions
+     *
+     * @type Object.<String, String>
+     */
+    $scope.modelOptions = {
+
+        /**
+         * The time zone to use when reading/writing the Date object of the
+         * model.
+         *
+         * @type String
+         */
+        timezone : 'UTC'
+
+    };
+
+    // Update typed value when model is changed
+    $scope.$watch('model', function modelChanged(model) {
+        $scope.typedValue = (model ? new Date(model + 'T00:00Z') : null);
+    });
+
+    // Update string value in model when typed value is changed
+    $scope.$watch('typedValue', function typedValueChanged(typedValue) {
+        $scope.model = (typedValue ? $filter('date')(typedValue, 'yyyy-MM-dd', 'UTC') : '');
+    });
 
 }]);

guacamole/src/main/webapp/app/form/controllers/timeFieldController.js

@@ -24,9 +24,38 @@
 /**
  * Controller for time fields.
  */
-angular.module('form').controller('timeFieldController', ['$scope',
+angular.module('form').controller('timeFieldController', ['$scope', '$injector',
-    function timeFieldController($scope) {
+    function timeFieldController($scope, $injector) {
 
-    /* STUB */
+    // Required services
+    var $filter = $injector.get('$filter');
+
+    /**
+     * Options which dictate the behavior of the input field model, as defined
+     * by https://docs.angularjs.org/api/ng/directive/ngModelOptions
+     *
+     * @type Object.<String, String>
+     */
+    $scope.modelOptions = {
+
+        /**
+         * The time zone to use when reading/writing the Date object of the
+         * model.
+         *
+         * @type String
+         */
+        timezone : 'UTC'
+
+    };
+
+    // Update typed value when model is changed
+    $scope.$watch('model', function modelChanged(model) {
+        $scope.typedValue = (model ? new Date('1970-01-01T' + model + 'Z') : null);
+    });
+
+    // Update string value in model when typed value is changed
+    $scope.$watch('typedValue', function typedValueChanged(typedValue) {
+        $scope.model = (typedValue ? $filter('date')(typedValue, 'HH:mm:ss', 'UTC') : '');
+    });
 
 }]);

guacamole/src/main/webapp/app/form/templates/dateField.html

@@ -1,3 +1,7 @@
 <div class="date-field">
-    <input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>
+    <input type="date"
+           ng-model="typedValue"
+           ng-model-options="modelOptions"
+           autocorrect="off"
+           autocapitalize="off"/>
 </div>

guacamole/src/main/webapp/app/form/templates/timeField.html

@@ -1,3 +1,7 @@
 <div class="time-field">
-    <input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>
+    <input type="time"
+           ng-model="typedValue"
+           ng-model-options="modelOptions"
+           autocorrect="off"
+           autocapitalize="off"/>
 </div>