mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 22:17:49 +00:00
[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.
This commit is contained in:
parent
bc3d1270d2
commit
a464fee6df
@ -31,6 +31,13 @@
|
||||
"templateUrl": "templates/controls/textfield.html"
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "DateTimeController",
|
||||
"implementation": "controllers/DateTimeController.js",
|
||||
"depends": [ "$scope" ]
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
{
|
||||
"key": "_checkbox",
|
||||
|
@ -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>
|
34
platform/forms/src/controllers/DateTimeController.js
Normal file
34
platform/forms/src/controllers/DateTimeController.js
Normal 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;
|
||||
|
||||
}
|
||||
);
|
Loading…
Reference in New Issue
Block a user