safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Jumper
2015-08-10 11:10:17 -07:00
parent 2e52382fd9
commit 4db7034608
4 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
guacamole/src/main/webapp/app/form/controllers/dateFieldController.js
View File

@@ -24,9 +24,38 @@
/**
* Controller for date fields.
*/
angular.module('form').controller('dateFieldController', ['$scope',
function dateFieldController($scope) {
angular.module('form').controller('dateFieldController', ['$scope', '$injector',
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') : '');
});
}]);

35
guacamole/src/main/webapp/app/form/controllers/timeFieldController.js
View File

@@ -24,9 +24,38 @@
/**
* Controller for time fields.
*/
angular.module('form').controller('timeFieldController', ['$scope',
function timeFieldController($scope) {
angular.module('form').controller('timeFieldController', ['$scope', '$injector',
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') : '');
});
}]);

6
guacamole/src/main/webapp/app/form/templates/dateField.html
View File

@@ -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>

6
guacamole/src/main/webapp/app/form/templates/timeField.html
View File

@@ -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>