1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { U as Utils } from './Utils-5f9f1f09.js';
|
3 | import { select, event } from 'd3';
|
4 | import { C as ChartComponent } from './ChartComponent-63d99ac0.js';
|
5 | import { p as pikaday } from './pikaday-e762b0a6.js';
|
6 | import moment from 'moment';
|
7 | import { T as TimezonePicker } from './TimezonePicker-b2aec6ea.js';
|
8 |
|
9 | var DateTimePicker = (function (_super) {
|
10 | __extends(DateTimePicker, _super);
|
11 | function DateTimePicker(renderTarget) {
|
12 | var _this = _super.call(this, renderTarget) || this;
|
13 | _this.isValid = true;
|
14 | _this.isSettingStartTime = true;
|
15 | _this.quickTimeArray = [
|
16 | ["Last 15 mins", 15 * 60 * 1000],
|
17 | ["Last 30 mins", 30 * 60 * 1000],
|
18 | ["Last Hour", 60 * 60 * 1000],
|
19 | ["Last 2 Hours", 2 * 60 * 60 * 1000],
|
20 | ["Last 4 Hours", 4 * 60 * 60 * 1000],
|
21 | ["Last 12 Hours", 12 * 60 * 60 * 1000],
|
22 | ["Last 24 Hours", 24 * 60 * 60 * 1000],
|
23 | ["Last 7 Days", 7 * 24 * 60 * 60 * 1000],
|
24 | ["Last 30 Days", 30 * 24 * 60 * 60 * 1000],
|
25 | ["Last 90 Days", 90 * 24 * 60 * 60 * 1000]
|
26 | ];
|
27 | _this.onSaveOrCancel = function () {
|
28 | _this.isSettingStartTime = true;
|
29 | };
|
30 | return _this;
|
31 | }
|
32 |
|
33 | DateTimePicker.prototype.getCurrentQuickTime = function () {
|
34 | var _this = this;
|
35 | var matchingQuickTime = this.quickTimeArray.filter(function (quickTimeTuple) {
|
36 | return (_this.toMillis - _this.fromMillis === quickTimeTuple[1]);
|
37 | });
|
38 | if (matchingQuickTime.length !== 1 || this.toMillis !== this.maxMillis) {
|
39 | return -1;
|
40 | }
|
41 | return matchingQuickTime[0][1];
|
42 | };
|
43 | DateTimePicker.prototype.getQuickTimeText = function (quickTimeMillis) {
|
44 | var filteredQuickTime = this.quickTimeArray.filter(function (quickTimeTuple) {
|
45 | return (quickTimeMillis === quickTimeTuple[1]);
|
46 | });
|
47 | if (filteredQuickTime.length !== 1) {
|
48 | return null;
|
49 | }
|
50 | return filteredQuickTime[0][0];
|
51 | };
|
52 | DateTimePicker.prototype.convertToCalendarDate = function (millis) {
|
53 | return this.roundDay(Utils.adjustDateFromTimezoneOffset(Utils.offsetFromUTC(new Date(millis), this.chartOptions.offset)));
|
54 | };
|
55 | DateTimePicker.prototype.setNewOffset = function (oldOffset) {
|
56 | var _this = this;
|
57 | var valuesToUpdate = ['fromMillis', 'toMillis'];
|
58 | valuesToUpdate.forEach(function (currValue) {
|
59 | var oldOffsetMinutes = Utils.getMinutesToUTC(oldOffset, _this[currValue]);
|
60 | var utcMillis = _this[currValue] - (oldOffsetMinutes * 60 * 1000);
|
61 | _this[currValue] = utcMillis - Utils.getOffsetMinutes(_this.chartOptions.offset, utcMillis) * 60 * 1000;
|
62 | });
|
63 | this.setFromMillis(this.fromMillis);
|
64 | this.setToMillis(this.toMillis);
|
65 | this.updateDisplayedFromDateTime();
|
66 | this.updateDisplayedToDateTime();
|
67 | this.startRange = new Date(this.fromMillis);
|
68 | this.endRange = new Date(this.toMillis);
|
69 | this.calendarPicker.config({ minDate: this.convertToCalendarDate(this.minMillis) });
|
70 | this.calendarPicker.config({ maxDate: this.convertToCalendarDate(this.maxMillis) });
|
71 | this.calendarPicker.draw();
|
72 | var rangeErrorCheck = this.rangeIsValid(this.fromMillis, this.toMillis);
|
73 | this.setIsSaveable(rangeErrorCheck.isSaveable);
|
74 | this.displayRangeErrors(rangeErrorCheck.errors);
|
75 | };
|
76 | DateTimePicker.prototype.render = function (chartOptions, minMillis, maxMillis, fromMillis, toMillis, onSet, onCancel) {
|
77 | var _this = this;
|
78 | if (chartOptions === void 0) { chartOptions = {}; }
|
79 | if (fromMillis === void 0) { fromMillis = null; }
|
80 | if (toMillis === void 0) { toMillis = null; }
|
81 | if (onSet === void 0) { onSet = null; }
|
82 | if (onCancel === void 0) { onCancel = null; }
|
83 | this.isSettingStartTime = true;
|
84 | this.minMillis = minMillis;
|
85 | this.maxMillis = maxMillis;
|
86 | if (chartOptions.offset && (typeof chartOptions.offset === "string")) {
|
87 | this.offsetName = chartOptions.offset;
|
88 | }
|
89 | if (toMillis == null) {
|
90 | toMillis = this.maxMillis;
|
91 | }
|
92 | if (fromMillis == null) {
|
93 | fromMillis = Math.max(toMillis - (24 * 60 * 60 * 1000), minMillis);
|
94 | }
|
95 | this.chartOptions.setOptions(chartOptions);
|
96 | moment.locale(this.chartOptions.dateLocale);
|
97 | this.fromMillis = fromMillis;
|
98 | this.toMillis = toMillis;
|
99 | this.onSet = onSet;
|
100 | this.onCancel = onCancel;
|
101 | this.targetElement = select(this.renderTarget)
|
102 | .classed("tsi-dateTimePicker", true);
|
103 | this.targetElement.html('');
|
104 | _super.prototype.themify.call(this, this.targetElement, this.chartOptions.theme);
|
105 | var group = this.targetElement.append('div')
|
106 | .classed('tsi-dateTimeGroup', true)
|
107 | .on('keydown', function (e) {
|
108 | if (event.keyCode <= 40 && event.keyCode >= 37) {
|
109 | event.stopPropagation();
|
110 | }
|
111 | if (event.keyCode === 27 && _this.chartOptions.dTPIsModal) {
|
112 | _this.onCancel();
|
113 | _this.onSaveOrCancel();
|
114 | }
|
115 | });
|
116 | this.quickTimesPanel = group.append('div')
|
117 | .classed('tsi-quickTimesPanel', true);
|
118 | this.buildQuickTimesPanel();
|
119 | this.dateTimeSelectionPanel = group.append('div')
|
120 | .classed('tsi-dateTimeSelectionPanel', true);
|
121 | this.timeControls = this.dateTimeSelectionPanel.append("div").classed("tsi-timeControlsContainer", true);
|
122 | this.calendar = this.dateTimeSelectionPanel.append("div").classed("tsi-calendarPicker", true);
|
123 | this.createTimezonePicker();
|
124 | var saveButtonContainer = this.dateTimeSelectionPanel.append("div").classed("tsi-saveButtonContainer", true);
|
125 | var self = this;
|
126 | var saveButton = saveButtonContainer.append("button").classed("tsi-saveButton", true).text(this.getString("Save"))
|
127 | .on("click", function () {
|
128 | self.onSet(self.fromMillis, self.toMillis, self.chartOptions.offset, self.maxMillis === self.toMillis, self.getCurrentQuickTime());
|
129 | self.onSaveOrCancel();
|
130 | });
|
131 | var cancelButton = saveButtonContainer.append('button')
|
132 | .attr('class', 'tsi-cancelButton')
|
133 | .text(this.getString('Cancel'))
|
134 | .on('click', function () {
|
135 | _this.onCancel();
|
136 | _this.onSaveOrCancel();
|
137 | })
|
138 | .on('keydown', function () {
|
139 | if (event.keyCode === 9 && !event.shiftKey && _this.chartOptions.dTPIsModal) {
|
140 | _this.quickTimesPanel.selectAll('.tsi-quickTime')
|
141 | .filter(function (d, i) { return i === 0; })
|
142 | .node()
|
143 | .focus();
|
144 | event.preventDefault();
|
145 | }
|
146 | });
|
147 |
|
148 | this.toMillis = this.maxMillis;
|
149 | this.setFromMillis(fromMillis);
|
150 | this.setToMillis(toMillis);
|
151 | this.targetElement.append("div").classed("tsi-errorMessageContainer", true);
|
152 | this.createTimePicker();
|
153 | this.createCalendar();
|
154 | this.calendarPicker.draw();
|
155 | this.updateDisplayedFromDateTime();
|
156 | this.updateDisplayedToDateTime();
|
157 | this.startRange = new Date(this.fromMillis);
|
158 | this.endRange = new Date(this.toMillis);
|
159 | this.calendarPicker.draw();
|
160 | return;
|
161 | };
|
162 | DateTimePicker.prototype.updateDisplayedDateTimes = function () {
|
163 | var _this = this;
|
164 | ['from', 'to'].forEach(function (fromOrTo) {
|
165 | var selectedDate = new Date(_this[fromOrTo + 'Millis']);
|
166 | _this.calendarPicker.setDate(_this.roundDay(Utils.offsetFromUTC(selectedDate)));
|
167 | _this[fromOrTo + 'Input'].node().value = _this.createTimeString(Utils.offsetFromUTC(selectedDate));
|
168 | });
|
169 | };
|
170 | DateTimePicker.prototype.setFromQuickTimes = function (relativeMillis) {
|
171 | this.isSettingStartTime = true;
|
172 | this.setToMillis(this.maxMillis);
|
173 | this.setFromMillis(this.maxMillis - relativeMillis);
|
174 | this.updateDisplayedFromDateTime();
|
175 | this.updateDisplayedToDateTime();
|
176 | this.calendarPicker.draw();
|
177 | };
|
178 | DateTimePicker.prototype.buildQuickTimesPanel = function () {
|
179 | var _this = this;
|
180 | var quickTimes = this.quickTimesPanel.selectAll('.tsi-quickTime')
|
181 | .data(this.quickTimeArray);
|
182 | var enteredQuickTimes = quickTimes.enter()
|
183 | .append('button')
|
184 | .attr('class', 'tsi-quickTime')
|
185 | .on('click', function (d) {
|
186 | _this.setFromQuickTimes(d[1]);
|
187 | })
|
188 | .text(function (d) { return d[0]; })
|
189 | .attr('aria-label', function (d) { return _this.getString('select quick time of') + " " + d[0]; });
|
190 |
|
191 | var firstQuickTime = enteredQuickTimes.filter(function (d, i) {
|
192 | return (i === 0);
|
193 | })
|
194 | .on('keydown', function () {
|
195 | if (event.keyCode === 9 && event.shiftKey && _this.chartOptions.dTPIsModal) {
|
196 | _this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-cancelButton").node().focus();
|
197 | event.preventDefault();
|
198 | }
|
199 | });
|
200 | if (this.chartOptions.dTPIsModal) {
|
201 | firstQuickTime.node().focus();
|
202 | }
|
203 | };
|
204 | DateTimePicker.prototype.createTimeString = function (currDate) {
|
205 | return this.getTimeFormat()(currDate);
|
206 | };
|
207 | DateTimePicker.prototype.getTimeFormat = function () {
|
208 | return Utils.timeFormat(true, true, this.chartOptions.offset, true, 0, null, this.chartOptions.dateLocale);
|
209 | };
|
210 | DateTimePicker.prototype.updateFromAndTo = function (fromMillis, toMillis) {
|
211 | this.setFromMillis(fromMillis);
|
212 | this.setToMillis(toMillis);
|
213 | this.updateDisplayedFromDateTime();
|
214 | this.updateDisplayedToDateTime();
|
215 | this.startRange = new Date(this.fromMillis);
|
216 | this.endRange = new Date(this.toMillis);
|
217 | this.calendarPicker.draw();
|
218 | };
|
219 | DateTimePicker.prototype.createTimezonePicker = function () {
|
220 | var _this = this;
|
221 | var offset = this.chartOptions.offset;
|
222 | if (this.chartOptions.includeTimezones && (typeof offset == "string" || offset == 0)) {
|
223 | var timezoneContainer = this.dateTimeSelectionPanel.append("div").attr("class", "tsi-timezoneContainer");
|
224 | var timezoneSelectionLabelID = Utils.guid();
|
225 | var timezoneSelectionID = timezoneSelectionLabelID + 'Tz';
|
226 | timezoneContainer.append("label")
|
227 | .classed("tsi-timeLabel", true)
|
228 | .attr('aria-label', this.getString('timezone selection'))
|
229 | .attr('id', timezoneSelectionLabelID)
|
230 | .attr('for', timezoneSelectionID)
|
231 | .text(this.getString('timezone'));
|
232 | var timezonePickerContainer = timezoneContainer.append("div").classed("tsi-timezonePickerContainer", true);
|
233 | var timezonePicker = new TimezonePicker(timezonePickerContainer.node());
|
234 | timezonePicker.render(function (newOffset) {
|
235 | var matchingQuickTime = _this.getCurrentQuickTime();
|
236 | var oldOffset = _this.chartOptions.offset;
|
237 | _this.chartOptions.offset = newOffset;
|
238 | _this.setNewOffset(oldOffset);
|
239 | if (matchingQuickTime !== -1) {
|
240 | _this.setFromQuickTimes(matchingQuickTime);
|
241 | }
|
242 | }, (typeof offset == "string" ? offset : "UTC"));
|
243 | select(timezonePicker.renderTarget).select('select')
|
244 | .attr('aria-labelledBy', timezoneSelectionLabelID)
|
245 | .attr('id', timezoneSelectionID);
|
246 | }
|
247 | };
|
248 |
|
249 | DateTimePicker.prototype.roundDay = function (d) {
|
250 | return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
251 | };
|
252 | DateTimePicker.prototype.setTimeRange = function (d, isFromSelect) {
|
253 | if (this.isSettingStartTime) {
|
254 | this.calendarPicker.setStartRange(d);
|
255 | this.calendarPicker.setEndRange(null);
|
256 | this.startRange = d;
|
257 | this.anchorDate = d;
|
258 | }
|
259 | else {
|
260 | if (d.valueOf() > this.anchorDate.valueOf()) {
|
261 | if (isFromSelect) {
|
262 | this.setFromDate(this.anchorDate);
|
263 | this.setToDate(d);
|
264 | }
|
265 | this.calendarPicker.setEndRange(d);
|
266 | this.calendarPicker.setStartRange(this.anchorDate);
|
267 | this.startRange = this.anchorDate;
|
268 | this.endRange = d;
|
269 | }
|
270 | else {
|
271 | if (isFromSelect) {
|
272 | this.setFromDate(d);
|
273 | this.setToDate(this.anchorDate);
|
274 | }
|
275 | this.calendarPicker.setStartRange(d);
|
276 | this.calendarPicker.setEndRange(this.anchorDate);
|
277 | this.endRange = this.anchorDate;
|
278 | this.startRange = d;
|
279 | }
|
280 | this.setTimeInputBox(this.fromMillis, true);
|
281 | this.setTimeInputBox(this.toMillis, false);
|
282 | }
|
283 | };
|
284 | DateTimePicker.prototype.createCalendar = function () {
|
285 | var _this = this;
|
286 | var i18nOptions = {
|
287 | previousMonth: this.getString('Previous Month'),
|
288 | nextMonth: this.getString('Next Month'),
|
289 | months: moment.localeData().months(),
|
290 | weekdays: moment.localeData().weekdays(),
|
291 | weekdaysShort: moment.localeData().weekdaysMin()
|
292 | };
|
293 |
|
294 | this.calendarPicker = new pikaday({
|
295 | bound: false,
|
296 | container: this.calendar.node(),
|
297 | field: this.calendar.node(),
|
298 | i18n: i18nOptions,
|
299 | numberOfMonths: 2,
|
300 | onSelect: function (d) {
|
301 | _this.setTimeRange(d, true);
|
302 | _this.isSettingStartTime = !_this.isSettingStartTime;
|
303 | _this.calendarPicker.draw();
|
304 | },
|
305 | onDraw: function (d) {
|
306 | if (_this.isSettingStartTime)
|
307 | return;
|
308 | var self = _this;
|
309 | _this.calendar.select(".pika-single").selectAll(".pika-day")
|
310 | .on("mouseover", function (d) {
|
311 | var date = new Date(Number(select(this).attr("data-pika-year")), Number(select(this).attr("data-pika-month")), Number(select(this).attr("data-pika-day")));
|
312 | if (!self.isSettingStartTime) {
|
313 | if (date.valueOf() < self.anchorDate.valueOf() && self.startRange.valueOf() != date.valueOf()) {
|
314 | self.setTimeRange(date, false);
|
315 | self.calendarPicker.draw();
|
316 | return;
|
317 | }
|
318 | if (date.valueOf() >= self.anchorDate.valueOf() && (self.endRange == undefined || self.endRange.valueOf() != date.valueOf())) {
|
319 | self.setTimeRange(date, false);
|
320 | self.calendarPicker.draw();
|
321 | return;
|
322 | }
|
323 | }
|
324 | });
|
325 | },
|
326 | minDate: this.convertToCalendarDate(this.minMillis),
|
327 | maxDate: this.convertToCalendarDate(this.maxMillis),
|
328 | defaultDate: Utils.adjustDateFromTimezoneOffset(new Date(this.fromMillis))
|
329 | });
|
330 | };
|
331 | DateTimePicker.prototype.setSelectedQuickTimes = function () {
|
332 | var _this = this;
|
333 | var isSelected = function (d) {
|
334 | return (_this.toMillis === _this.maxMillis && (_this.toMillis - _this.fromMillis === d[1]));
|
335 | };
|
336 | this.quickTimesPanel.selectAll('.tsi-quickTime')
|
337 | .classed('tsi-isSelected', isSelected)
|
338 | .attr('aria-pressed', isSelected);
|
339 | };
|
340 | DateTimePicker.prototype.setFromDate = function (calendarDate) {
|
341 | var convertedFrom = new Date(Utils.offsetFromUTC(new Date(this.fromMillis), this.chartOptions.offset));
|
342 | convertedFrom.setUTCFullYear(calendarDate.getFullYear());
|
343 | convertedFrom.setUTCMonth(calendarDate.getMonth());
|
344 | convertedFrom.setUTCDate(calendarDate.getDate());
|
345 | this.setFromMillis(Utils.offsetToUTC(convertedFrom, this.chartOptions.offset).valueOf());
|
346 | };
|
347 | DateTimePicker.prototype.setToDate = function (calendarDate) {
|
348 | var convertedTo = new Date(Utils.offsetFromUTC(new Date(this.toMillis), this.chartOptions.offset));
|
349 | convertedTo.setUTCFullYear(calendarDate.getFullYear());
|
350 | convertedTo.setUTCMonth(calendarDate.getMonth());
|
351 | convertedTo.setUTCDate(calendarDate.getDate());
|
352 | this.setToMillis(Utils.offsetToUTC(convertedTo, this.chartOptions.offset).valueOf());
|
353 | };
|
354 | DateTimePicker.prototype.setIsSaveable = function (isSaveable) {
|
355 |
|
356 | this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-saveButton")
|
357 | .attr("disabled", isSaveable ? null : true)
|
358 | .classed("tsi-buttonDisabled", !isSaveable);
|
359 | this.isValid = isSaveable;
|
360 | };
|
361 |
|
362 | DateTimePicker.prototype.adjustSecondsAndMillis = function (rawMillis) {
|
363 | var currDate = new Date(rawMillis);
|
364 | var maxDate = new Date(this.maxMillis);
|
365 | currDate.setUTCSeconds(maxDate.getUTCSeconds());
|
366 | currDate.setUTCMilliseconds(maxDate.getUTCMilliseconds());
|
367 | return currDate.valueOf();
|
368 | };
|
369 | DateTimePicker.prototype.setFromMillis = function (millis) {
|
370 | var rangeErrorCheck = this.rangeIsValid(millis, this.toMillis);
|
371 | this.fromMillis = millis;
|
372 | this.setIsSaveable(rangeErrorCheck.isSaveable);
|
373 | this.displayRangeErrors(rangeErrorCheck.errors);
|
374 | this.setSelectedQuickTimes();
|
375 | };
|
376 | DateTimePicker.prototype.setToMillis = function (millis) {
|
377 | var rangeErrorCheck = this.rangeIsValid(this.fromMillis, millis);
|
378 | this.toMillis = millis;
|
379 | this.setIsSaveable(rangeErrorCheck.isSaveable);
|
380 | this.displayRangeErrors(rangeErrorCheck.errors);
|
381 | this.setSelectedQuickTimes();
|
382 | };
|
383 | DateTimePicker.prototype.displayRangeErrors = function (rangeErrors) {
|
384 | this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessage").remove();
|
385 | if (rangeErrors.length != 0) {
|
386 | this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessages")
|
387 | .data(rangeErrors)
|
388 | .enter()
|
389 | .append("div")
|
390 | .classed("tsi-errorMessage", true)
|
391 | .text(function (d) { return d; });
|
392 | }
|
393 | };
|
394 | DateTimePicker.prototype.rangeIsValid = function (prospectiveFromMillis, prospectiveToMillis) {
|
395 | var accumulatedErrors = [];
|
396 | var isSaveable = true;
|
397 | var bothTimesValid = !isNaN(prospectiveFromMillis) && !isNaN(prospectiveToMillis);
|
398 | if (isNaN(prospectiveFromMillis)) {
|
399 | accumulatedErrors.push("*Invalid start date/time");
|
400 | isSaveable = false;
|
401 | }
|
402 | if (isNaN(prospectiveToMillis)) {
|
403 | accumulatedErrors.push("*Invalid end date/time");
|
404 | isSaveable = false;
|
405 | }
|
406 | if (bothTimesValid) {
|
407 | if (prospectiveFromMillis > prospectiveToMillis) {
|
408 | accumulatedErrors.push("*Start time must be before end time");
|
409 | isSaveable = false;
|
410 | }
|
411 | if (prospectiveFromMillis < this.minMillis) {
|
412 | accumulatedErrors.push("*Start time is before first possible time (" + this.getTimeFormat()(this.minMillis) + ")");
|
413 | }
|
414 | if (prospectiveFromMillis > this.maxMillis) {
|
415 | accumulatedErrors.push("*Start time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
|
416 | }
|
417 | if (prospectiveToMillis > this.maxMillis) {
|
418 | accumulatedErrors.push("*End time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
|
419 | }
|
420 | if (prospectiveToMillis < this.minMillis) {
|
421 | accumulatedErrors.push("*End time is before first possible time (" + this.getTimeFormat()(this.minMillis) + ")");
|
422 | }
|
423 | }
|
424 | return {
|
425 | rangeIsValid: (accumulatedErrors.length == 0),
|
426 | errors: accumulatedErrors,
|
427 | isSaveable: isSaveable
|
428 | };
|
429 | };
|
430 | DateTimePicker.prototype.updateDisplayedFromDateTime = function (fromInput) {
|
431 | if (fromInput === void 0) { fromInput = false; }
|
432 | this.calendarPicker.setStartRange(this.convertToCalendarDate(this.fromMillis));
|
433 | if (!fromInput)
|
434 | this.setTimeInputBox(new Date(this.fromMillis), true);
|
435 | };
|
436 | DateTimePicker.prototype.updateDisplayedToDateTime = function (fromInput) {
|
437 | if (fromInput === void 0) { fromInput = false; }
|
438 | this.calendarPicker.setEndRange(this.convertToCalendarDate(this.toMillis));
|
439 | if (!fromInput)
|
440 | this.setTimeInputBox(new Date(this.toMillis), false);
|
441 | };
|
442 | DateTimePicker.prototype.offsetUTC = function (date) {
|
443 | var dateCopy = new Date(date.valueOf());
|
444 | dateCopy.setTime(dateCopy.getTime() - dateCopy.getTimezoneOffset() * 60 * 1000);
|
445 | return dateCopy;
|
446 | };
|
447 | DateTimePicker.prototype.offsetFromUTC = function (date) {
|
448 | var dateCopy = new Date(date.valueOf());
|
449 | dateCopy.setTime(dateCopy.getTime() + dateCopy.getTimezoneOffset() * 60 * 1000);
|
450 | return dateCopy;
|
451 | };
|
452 | DateTimePicker.prototype.checkDateTimeValidity = function () {
|
453 | var parsedFrom = Utils.parseUserInputDateTime(this.fromInput.node().value, this.chartOptions.offset);
|
454 | var parsedTo = Utils.parseUserInputDateTime(this.toInput.node().value, this.chartOptions.offset);
|
455 | var rangeErrorCheck = this.rangeIsValid(parsedFrom, parsedTo);
|
456 | this.setIsSaveable(rangeErrorCheck.isSaveable);
|
457 | this.displayRangeErrors(rangeErrorCheck.errors);
|
458 | };
|
459 | DateTimePicker.prototype.setTimeInputBox = function (utcDate, isFrom) {
|
460 | if (isFrom) {
|
461 | this.fromInput.node().value = this.createTimeString(utcDate);
|
462 | }
|
463 | else {
|
464 | this.toInput.node().value = this.createTimeString(utcDate);
|
465 | }
|
466 | };
|
467 | DateTimePicker.prototype.createTimePicker = function () {
|
468 | var _this = this;
|
469 | var timeInputContainer = this.timeControls.append("div").attr("class", "tsi-timeInputContainer");
|
470 | var createTimePicker = function (startOrEnd) {
|
471 | var fromOrToContainer = timeInputContainer.append("div").classed("tsi-" + startOrEnd + "Container", true);
|
472 | var inputLabelID = Utils.guid();
|
473 | var inputID = inputLabelID + 'Input';
|
474 | var timeLabel = fromOrToContainer.append("label")
|
475 | .classed("tsi-timeLabel", true)
|
476 | .attr('id', inputLabelID)
|
477 | .attr('for', inputID)
|
478 | .attr('aria-label', "" + (startOrEnd === 'start' ? _this.getString('Start time input') : _this.getString('End time input')))
|
479 | .text(_this.getString(startOrEnd));
|
480 | var inputName = startOrEnd === 'start' ? 'fromInput' : 'toInput';
|
481 | _this[inputName] = fromOrToContainer.append('input')
|
482 | .attr('class', 'tsi-dateTimeInput', true)
|
483 | .attr('aria-labelledby', inputLabelID)
|
484 | .attr('id', inputID)
|
485 | .on('input', function () {
|
486 | var rangeErrorCheck = _this.checkDateTimeValidity();
|
487 | _this.isSettingStartTime = true;
|
488 | if (_this.isValid) {
|
489 | if (startOrEnd === 'start') {
|
490 | var parsedFrom = Utils.parseUserInputDateTime(_this.fromInput.node().value, _this.chartOptions.offset);
|
491 | _this.setFromMillis(parsedFrom);
|
492 | _this.updateDisplayedFromDateTime(true);
|
493 | _this.calendarPicker.draw();
|
494 | }
|
495 | else {
|
496 | var parsedTo = Utils.parseUserInputDateTime(_this.toInput.node().value, _this.chartOptions.offset);
|
497 | _this.setToMillis(parsedTo);
|
498 | _this.updateDisplayedToDateTime(true);
|
499 | _this.calendarPicker.draw();
|
500 | }
|
501 | }
|
502 | });
|
503 | if (startOrEnd == 'end') {
|
504 | fromOrToContainer.append("button")
|
505 | .attr("class", "tsi-snapToEndRangeButton")
|
506 | .text(_this.getString("Latest"))
|
507 | .attr('aria-label', _this.getString('snap end time to latest'))
|
508 | .on("click", function () {
|
509 | if (!_this.isSettingStartTime) {
|
510 | _this.setFromDate(_this.startRange);
|
511 | }
|
512 | _this.setToMillis(_this.maxMillis);
|
513 | _this.updateDisplayedFromDateTime();
|
514 | _this.updateDisplayedToDateTime();
|
515 | _this.isSettingStartTime = true;
|
516 | _this.calendarPicker.draw();
|
517 | });
|
518 | }
|
519 | };
|
520 | createTimePicker("start");
|
521 | createTimePicker("end");
|
522 | };
|
523 | return DateTimePicker;
|
524 | }(ChartComponent));
|
525 |
|
526 | export { DateTimePicker as D };
|