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 |
|
8 | var SingleDateTimePicker = (function (_super) {
|
9 | __extends(SingleDateTimePicker, _super);
|
10 | function SingleDateTimePicker(renderTarget) {
|
11 | var _this = _super.call(this, renderTarget) || this;
|
12 | _this.isValid = true;
|
13 | return _this;
|
14 | }
|
15 | SingleDateTimePicker.prototype.getMillis = function () {
|
16 | return this.millis;
|
17 | };
|
18 | SingleDateTimePicker.prototype.render = function (chartOptions, minMillis, maxMillis, millis, onSet) {
|
19 | var _this = this;
|
20 | if (chartOptions === void 0) { chartOptions = {}; }
|
21 | if (millis === void 0) { millis = null; }
|
22 | if (onSet === void 0) { onSet = null; }
|
23 | this.minMillis = minMillis;
|
24 | this.maxMillis = maxMillis;
|
25 | if (chartOptions.offset && (typeof chartOptions.offset == "string")) {
|
26 | this.offsetName = chartOptions.offset;
|
27 | }
|
28 | if (millis === null) {
|
29 | millis = this.maxMillis;
|
30 | }
|
31 | this.chartOptions.setOptions(chartOptions);
|
32 | moment.locale(this.chartOptions.dateLocale);
|
33 | this.millis = millis;
|
34 | this.onSet = onSet;
|
35 | this.targetElement = select(this.renderTarget)
|
36 | .classed("tsi-singleDateTimePicker", true);
|
37 | this.targetElement.html('');
|
38 | _super.prototype.themify.call(this, this.targetElement, this.chartOptions.theme);
|
39 | this.targetElement.on('keydown', function (e) {
|
40 | if (event.keyCode <= 40 && event.keyCode >= 37) {
|
41 | event.stopPropagation();
|
42 | }
|
43 | if (event.keyCode === 27 && _this.chartOptions.dTPIsModal) {
|
44 | _this.onSet();
|
45 | }
|
46 | });
|
47 | this.timeControls = this.targetElement.append("div").classed("tsi-timeControlsContainer", true);
|
48 | this.calendar = this.targetElement.append("div").classed("tsi-calendarPicker", true);
|
49 | var saveButtonContainer = this.targetElement.append("div").classed("tsi-saveButtonContainer", true);
|
50 | var self = this;
|
51 | this.saveButton = saveButtonContainer.append("button").classed("tsi-saveButton", true).text(this.getString("Save"))
|
52 | .on("click", function () {
|
53 | if (_this.isValid) {
|
54 | self.onSet(_this.millis);
|
55 | }
|
56 | })
|
57 | .on('keydown', function () {
|
58 | if (event.keyCode === 9 && !event.shiftKey && _this.chartOptions.dTPIsModal) {
|
59 | _this.timeInput.node().focus();
|
60 | event.preventDefault();
|
61 | }
|
62 | });
|
63 | this.targetElement.append("div").classed("tsi-errorMessageContainer", true);
|
64 | this.createCalendar();
|
65 | this.calendarPicker.draw();
|
66 | this.createTimePicker();
|
67 | this.updateDisplayedDateTime();
|
68 | this.date = new Date(this.millis);
|
69 | this.calendarPicker.draw();
|
70 | if (this.chartOptions.dTPIsModal) {
|
71 | this.timeInput.node().focus();
|
72 | }
|
73 | return;
|
74 | };
|
75 |
|
76 | SingleDateTimePicker.prototype.roundDay = function (d) {
|
77 | var offsetDate = Utils.offsetFromUTC(d, this.chartOptions.offset);
|
78 | return new Date(offsetDate.getUTCFullYear(), offsetDate.getUTCMonth(), offsetDate.getUTCDate());
|
79 | };
|
80 | SingleDateTimePicker.prototype.setSelectedDate = function (d) {
|
81 | this.calendarPicker.setDate(d, true);
|
82 | this.setDate(d);
|
83 | this.timeInput.node().value = this.createTimeString(Utils.offsetFromUTC(new Date(this.millis)));
|
84 | };
|
85 | SingleDateTimePicker.prototype.createCalendar = function () {
|
86 | var _this = this;
|
87 | var i18nOptions = {
|
88 | previousMonth: this.getString('Previous Month'),
|
89 | nextMonth: this.getString('Next Month'),
|
90 | months: moment.localeData().months(),
|
91 | weekdays: moment.localeData().weekdays(),
|
92 | weekdaysShort: moment.localeData().weekdaysMin()
|
93 | };
|
94 |
|
95 | this.calendarPicker = new pikaday({
|
96 | bound: false,
|
97 | container: this.calendar.node(),
|
98 | field: this.calendar.node(),
|
99 | i18n: i18nOptions,
|
100 | numberOfMonths: 1,
|
101 | onSelect: function (d) {
|
102 | _this.setSelectedDate(d);
|
103 | _this.calendarPicker.draw();
|
104 | _this.checkDateTimeValidity();
|
105 | },
|
106 | onDraw: function (d) {
|
107 | _this.calendar.select(".pika-single").selectAll('button').attr('tabindex', -1);
|
108 | },
|
109 | minDate: this.convertToLocal(Utils.offsetFromUTC(new Date(this.minMillis), this.chartOptions.offset)),
|
110 | maxDate: this.convertToLocal(Utils.offsetFromUTC(new Date(this.maxMillis), this.chartOptions.offset)),
|
111 | defaultDate: this.convertToLocal(Utils.offsetFromUTC(new Date(this.millis), this.chartOptions.offset))
|
112 | });
|
113 | };
|
114 | SingleDateTimePicker.prototype.setDate = function (d) {
|
115 | var date = Utils.offsetFromUTC(new Date(this.millis), this.chartOptions.offset);
|
116 | date.setUTCFullYear(d.getFullYear());
|
117 | date.setUTCMonth(d.getMonth());
|
118 | date.setUTCDate(d.getDate());
|
119 | this.setMillis(date.valueOf(), true);
|
120 | };
|
121 | SingleDateTimePicker.prototype.setIsValid = function (isValid) {
|
122 | this.isValid = isValid;
|
123 | };
|
124 | SingleDateTimePicker.prototype.setMillis = function (millis, shouldOffset) {
|
125 | if (shouldOffset === void 0) { shouldOffset = true; }
|
126 | var adjustedMillis = millis - (shouldOffset ? Utils.getOffsetMinutes(this.chartOptions.offset, millis) * 60 * 1000 : 0);
|
127 | this.millis = adjustedMillis;
|
128 | };
|
129 | SingleDateTimePicker.prototype.displayErrors = function (rangeErrors) {
|
130 | this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessage").remove();
|
131 | if (rangeErrors.length != 0) {
|
132 | this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessages")
|
133 | .data(rangeErrors)
|
134 | .enter()
|
135 | .append("div")
|
136 | .classed("tsi-errorMessage", true)
|
137 | .text(function (d) { return d; });
|
138 | }
|
139 | };
|
140 | SingleDateTimePicker.prototype.checkDateTimeValidity = function () {
|
141 | var parsedMillis = this.parseUserInputDateTime();
|
142 | var errorCheck = this.dateTimeIsValid(parsedMillis);
|
143 | this.displayErrors(errorCheck.errors);
|
144 | this.setIsValid(errorCheck.rangeIsValid);
|
145 | };
|
146 | SingleDateTimePicker.prototype.dateTimeIsValid = function (prospectiveMillis) {
|
147 | var accumulatedErrors = [];
|
148 | if (isNaN(prospectiveMillis)) {
|
149 | accumulatedErrors.push('*time is invalid');
|
150 | }
|
151 | else {
|
152 | var firstDateTime = Utils.offsetFromUTC(new Date(this.minMillis), this.chartOptions.offset);
|
153 | var lastDateTime = Utils.offsetFromUTC(new Date(this.maxMillis), this.chartOptions.offset);
|
154 | if (prospectiveMillis < this.minMillis) {
|
155 | accumulatedErrors.push("*date/time is before first possible date and time (" + this.getTimeFormat()(firstDateTime) + ")");
|
156 | }
|
157 | if (prospectiveMillis > this.maxMillis) {
|
158 | accumulatedErrors.push("*date/time is after last possible date and time (" + this.getTimeFormat()(lastDateTime) + ")");
|
159 | }
|
160 | }
|
161 | return {
|
162 | rangeIsValid: (accumulatedErrors.length == 0),
|
163 | errors: accumulatedErrors
|
164 | };
|
165 | };
|
166 | SingleDateTimePicker.prototype.getTimeFormat = function () {
|
167 | return Utils.timeFormat(true, true, this.chartOptions.offset, true, 0, null, this.chartOptions.dateLocale);
|
168 | };
|
169 | SingleDateTimePicker.prototype.parseUserInputDateTime = function () {
|
170 | return Utils.parseUserInputDateTime(this.timeInput.node().value, this.chartOptions.offset);
|
171 | };
|
172 | SingleDateTimePicker.prototype.convertToCalendarDate = function (millis) {
|
173 | return this.roundDay(Utils.adjustDateFromTimezoneOffset(Utils.offsetFromUTC(new Date(millis), this.chartOptions.offset)));
|
174 | };
|
175 | SingleDateTimePicker.prototype.updateDisplayedDateTime = function (fromInput) {
|
176 | if (fromInput === void 0) { fromInput = false; }
|
177 | var selectedDate = new Date(this.millis);
|
178 | this.calendarPicker.setDate(this.convertToCalendarDate(this.millis), fromInput);
|
179 | if (!fromInput) {
|
180 | this.timeInput.node().value = this.createTimeString(Utils.offsetFromUTC(selectedDate));
|
181 | }
|
182 | };
|
183 | SingleDateTimePicker.prototype.createTimeString = function (currDate) {
|
184 | var offsetDate = Utils.offsetFromUTC(currDate, this.chartOptions.offset);
|
185 | return this.getTimeFormat()(currDate);
|
186 | };
|
187 |
|
188 | SingleDateTimePicker.prototype.convertToLocal = function (date) {
|
189 | return new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
|
190 | };
|
191 | SingleDateTimePicker.prototype.createTimePicker = function () {
|
192 | var _this = this;
|
193 | var timeLabel = this.timeControls.append("h4").classed("tsi-timeLabel", true).text(this.getString('Date/Time'));
|
194 | this.timeInput = this.timeControls.append('input').attr('class', 'tsi-dateTimeInput tsi-input')
|
195 | .on('input', function () {
|
196 | _this.checkDateTimeValidity();
|
197 | if (_this.isValid) {
|
198 | var parsedMillis = _this.parseUserInputDateTime();
|
199 | _this.setMillis(parsedMillis, false);
|
200 | _this.updateDisplayedDateTime(true);
|
201 | }
|
202 | })
|
203 | .on('keydown', function () {
|
204 | if (event.keyCode === 9 && event.shiftKey && _this.chartOptions.dTPIsModal) {
|
205 | _this.saveButton.node().focus();
|
206 | event.preventDefault();
|
207 | }
|
208 | });
|
209 | };
|
210 | return SingleDateTimePicker;
|
211 | }(ChartComponent));
|
212 |
|
213 | export { SingleDateTimePicker as S };
|