mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(timepickerV2): absolute time / calendar picker works, #2761
This commit is contained in:
parent
a8a94ef87b
commit
69db9e0d45
@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) {
|
||||
|
||||
p.formatDate = function(date, format) {
|
||||
if (!moment.isMoment(date)) {
|
||||
date = moment(date)
|
||||
date = moment(date);
|
||||
}
|
||||
|
||||
format = format || 'YYYY-MM-DD HH:mm:ss';
|
||||
|
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-if="openFromPicker">
|
||||
<datepicker ng-model="absolute.to" class="gf-timepicker-component" show-weeks="false"></datepicker>
|
||||
<datepicker ng-model="absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
|
||||
</div>
|
||||
|
||||
<label class="small">To:</label>
|
||||
@ -21,6 +21,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="openToPicker">
|
||||
<datepicker ng-model="absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
|
||||
</div>
|
||||
|
||||
<label class="small">Refreshing every:</label>
|
||||
<select ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
|
||||
</select>
|
||||
|
@ -1,7 +1,8 @@
|
||||
define([
|
||||
"angular",
|
||||
"lodash",
|
||||
"moment",
|
||||
],function (angular, moment) {
|
||||
],function (angular, _, moment) {
|
||||
'use strict';
|
||||
|
||||
angular.
|
||||
@ -11,22 +12,30 @@ define([
|
||||
restrict: 'A',
|
||||
require: 'ngModel',
|
||||
link: function ($scope, $elem, attrs, ngModel) {
|
||||
// var format = 'YYYY-MM-DD HH:mm:ss.SSS';
|
||||
// // $elem.after('<div class="input-datetime-format">' + format + '</div>');
|
||||
//
|
||||
// // What should I make with the input from the user?
|
||||
// var fromUser = function (text) {
|
||||
// var parsed = moment(text, format);
|
||||
// return parsed.isValid() ? parsed : undefined;
|
||||
// };
|
||||
//
|
||||
// // How should I present the data back to the user in the input field?
|
||||
// var toUser = function (datetime) {
|
||||
// return moment(datetime).format(format);
|
||||
// };
|
||||
//
|
||||
// ngModel.$parsers.push(fromUser);
|
||||
// ngModel.$formatters.push(toUser);
|
||||
var format = 'YYYY-MM-DD HH:mm:ss';
|
||||
// $elem.after('<div class="input-datetime-format">' + format + '</div>');
|
||||
|
||||
// What should I make with the input from the user?
|
||||
var fromUser = function (text) {
|
||||
console.log('fromUser: ' + text);
|
||||
return text;
|
||||
// if (_.isString(text)) {
|
||||
// }
|
||||
// var parsed = moment(text, format);
|
||||
// return parsed.isValid() ? parsed : undefined;
|
||||
};
|
||||
|
||||
// How should I present the data back to the user in the input field?
|
||||
var toUser = function (currentValue) {
|
||||
if (moment.isMoment(currentValue)) {
|
||||
return currentValue.format(format);
|
||||
} else {
|
||||
return currentValue;
|
||||
}
|
||||
};
|
||||
|
||||
ngModel.$parsers.push(fromUser);
|
||||
ngModel.$formatters.push(toUser);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
@ -54,7 +54,7 @@ export class TimePickerCtrl {
|
||||
this.$scope.dashboard.formatDate(time.to, format);
|
||||
}
|
||||
|
||||
this.$scope.absoluteJs = {form: time.from.toDate(), to: time.to.toDate()};
|
||||
this.$scope.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
|
||||
this.$scope.timeRaw = timeRaw;
|
||||
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
|
||||
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
|
||||
@ -92,6 +92,14 @@ export class TimePickerCtrl {
|
||||
this.$scope.appEvent('hide-dash-editor');
|
||||
}
|
||||
|
||||
absoluteFromChanged() {
|
||||
this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs);
|
||||
}
|
||||
|
||||
absoluteToChanged() {
|
||||
this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs);
|
||||
}
|
||||
|
||||
setRelativeFilter(timespan) {
|
||||
this.$scope.panel.now = true;
|
||||
|
||||
|
@ -44,13 +44,18 @@
|
||||
}
|
||||
|
||||
.gf-timepicker-component {
|
||||
margin-bottom: 10px;
|
||||
button.btn-sm {
|
||||
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
|
||||
background-image: none;
|
||||
border: none;
|
||||
padding: 6px 9px;
|
||||
color: @textColor;
|
||||
&.active .text-info {
|
||||
&.active span {
|
||||
color: @blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-info {
|
||||
color: @orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -19,7 +19,7 @@ require.config({
|
||||
'angular-sanitize': 'vendor/angular-sanitize/angular-sanitize',
|
||||
angularMocks: 'vendor/angular-mocks/angular-mocks',
|
||||
'angular-dragdrop': 'vendor/angular-native-dragdrop/draganddrop',
|
||||
'angular-ui': 'vendor/angular-ui/tabs',
|
||||
'angular-ui': 'vendor/angular-ui/ui-bootstrap-tpls',
|
||||
'angular-strap': 'vendor/angular-other/angular-strap',
|
||||
timepicker: 'vendor/angular-other/timepicker',
|
||||
datepicker: 'vendor/angular-other/datepicker',
|
||||
|
Loading…
Reference in New Issue
Block a user