ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 14:07:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Forms] Date time controls

Browse Source 
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.
This commit is contained in:
Victor Woeltjen 2014-11-28 13:15:02 -08:00
parent bc3d1270d2
commit a464fee6df
3 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
platform/forms/bundle.json
View File

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

58
platform/forms/res/templates/controls/datetime.html
View File

@ -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'>
<span class='field control date'>
<input type='text' name='date' />
</span>
<span class='field control time sm'>
<input type='text' name='hour' maxlength='2' />
</span>
<span class='field control time sm'>
<input type='text' name='min' maxlength='2' />
</span>
<span class='field control time sm'>
<input type='text' name='sec' maxlength='2' />
</span>
<span class='field control timezone'>
UTC
</span>
</div>
</div>
<ng-form name="mctControl">
<div class='fields' ng-controller="DateTimeController">
<span class='field control 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'
ng-model="datetime.hour"
ng-required='true'/>
</span>
<span class='field control time sm'>
<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'
ng-model="datetime.sec"
ng-required='true'/>
</span>
<span class='field control timezone'>
UTC
</span>
</div>
</ng-form>
</div>

34
platform/forms/src/controllers/DateTimeController.js Normal file
View File

@ -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;
}
);