@progress/kendo-vue-dateinputs 2.6.3 → 2.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-vue-dateinputs.js +1 -1
- package/dist/es/calendar/components/Calendar.js +1 -1
- package/dist/es/daterangepicker/DateRangePicker.d.ts +3 -2
- package/dist/es/daterangepicker/DateRangePicker.js +274 -182
- package/dist/es/main.d.ts +3 -1
- package/dist/es/main.js +2 -20
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/calendar/components/Calendar.js +1 -1
- package/dist/npm/daterangepicker/DateRangePicker.d.ts +3 -2
- package/dist/npm/daterangepicker/DateRangePicker.js +272 -178
- package/dist/npm/main.d.ts +3 -1
- package/dist/npm/main.js +3 -12
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +7 -7
|
@@ -1,20 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
__assign = Object.assign || function (t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
|
|
6
|
-
for (var p in s) {
|
|
7
|
-
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
return __assign.apply(this, arguments);
|
|
15
|
-
}; // @ts-ignore
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
// @ts-ignore
|
|
18
2
|
import * as Vue from 'vue';
|
|
19
3
|
var allVue = Vue;
|
|
20
4
|
var gh = allVue.h;
|
|
@@ -22,11 +6,12 @@ var ref = allVue.ref;
|
|
|
22
6
|
var inject = allVue.inject;
|
|
23
7
|
import { Popup } from '@progress/kendo-vue-popup';
|
|
24
8
|
import { cloneDate } from '@progress/kendo-date-math';
|
|
25
|
-
import { guid, classNames, Keys } from '@progress/kendo-vue-common';
|
|
9
|
+
import { guid, classNames, Keys, canUseDOM } from '@progress/kendo-vue-common';
|
|
26
10
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
27
|
-
import { validatePackage } from '@progress/kendo-vue-common';
|
|
11
|
+
import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
|
|
28
12
|
import { packageMetadata } from '../package-metadata';
|
|
29
13
|
import { DateInput } from '../dateinput/DateInput';
|
|
14
|
+
import { Calendar } from '../calendar/components/Calendar';
|
|
30
15
|
import { EMPTY_SELECTIONRANGE } from '../calendar/models';
|
|
31
16
|
import { MIN_DATE, MAX_DATE } from '../defaults';
|
|
32
17
|
import { swapStartEnd, start, end, separator, messages } from '../messages';
|
|
@@ -62,6 +47,8 @@ var DateRangePicker = {
|
|
|
62
47
|
type: Boolean,
|
|
63
48
|
default: false
|
|
64
49
|
},
|
|
50
|
+
startDateInput: [String, Object, Function],
|
|
51
|
+
endDateInput: [String, Object, Function],
|
|
65
52
|
endDateInputSettings: Object,
|
|
66
53
|
focusedDate: Date,
|
|
67
54
|
format: {
|
|
@@ -95,21 +82,38 @@ var DateRangePicker = {
|
|
|
95
82
|
ariaDescribedBy: String,
|
|
96
83
|
max: {
|
|
97
84
|
type: Date,
|
|
98
|
-
default:
|
|
85
|
+
default: function _default() {
|
|
86
|
+
return MAX_DATE;
|
|
87
|
+
}
|
|
99
88
|
},
|
|
100
89
|
min: {
|
|
101
90
|
type: Date,
|
|
102
|
-
default:
|
|
91
|
+
default: function _default() {
|
|
92
|
+
return MIN_DATE;
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
popupSettings: {
|
|
96
|
+
type: Object,
|
|
97
|
+
default: function _default() {
|
|
98
|
+
return {};
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
show: {
|
|
102
|
+
type: Boolean,
|
|
103
|
+
default: undefined
|
|
103
104
|
},
|
|
104
|
-
popupSettings: Object,
|
|
105
|
-
show: Boolean,
|
|
106
105
|
startDateInputSettings: Object,
|
|
107
106
|
swapButton: {
|
|
108
107
|
type: Boolean,
|
|
109
108
|
default: false
|
|
110
109
|
},
|
|
111
110
|
tabIndex: Number,
|
|
112
|
-
value:
|
|
111
|
+
value: {
|
|
112
|
+
type: Object,
|
|
113
|
+
default: function _default() {
|
|
114
|
+
return undefined;
|
|
115
|
+
}
|
|
116
|
+
} // PropTypes.shape({ start: Date, end: Date })
|
|
113
117
|
|
|
114
118
|
},
|
|
115
119
|
created: function created() {
|
|
@@ -117,30 +121,36 @@ var DateRangePicker = {
|
|
|
117
121
|
this._wrapper = null;
|
|
118
122
|
this._calendar = null;
|
|
119
123
|
this._startDateInput = null;
|
|
120
|
-
this._endDateInput = null; // this.valueDuringOnChange
|
|
124
|
+
this._endDateInput = null; // this.valueDuringOnChange = undefined;
|
|
121
125
|
// this.showDuringOnChange?: boolean;
|
|
122
|
-
// this.nextTickId: any;
|
|
123
126
|
|
|
124
127
|
this._popupId = guid();
|
|
128
|
+
this._anchor = guid();
|
|
125
129
|
this._startInputId = guid();
|
|
126
130
|
this._endInputId = guid();
|
|
127
|
-
this.shouldFocusDateInput = false;
|
|
128
|
-
this.shouldFocusCalendar = false;
|
|
129
131
|
validatePackage(packageMetadata);
|
|
130
132
|
this.currentShow = this.$props.show || this.$props.defaultShow;
|
|
131
133
|
this.currentValue = this.$props.value || this.$props.defaultValue;
|
|
132
|
-
this.
|
|
133
|
-
this.setShow = this.setShow.bind(this);
|
|
134
|
-
this.focusCalendarElement = this.focusCalendarElement.bind(this);
|
|
135
|
-
this.focusDateInputElement = this.focusDateInputElement.bind(this);
|
|
134
|
+
this.initialAnimation = this.currentShow;
|
|
136
135
|
},
|
|
137
136
|
mounted: function mounted() {
|
|
137
|
+
this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
|
|
138
|
+
this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
|
|
139
|
+
this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
|
|
140
|
+
|
|
138
141
|
if (this.computedShow) {
|
|
139
142
|
// If defaultShow is true during the initial render, the popup is not aligned.
|
|
140
143
|
this.$forceUpdate();
|
|
144
|
+
this.$nextTick(function () {
|
|
145
|
+
this.initialAnimation = false;
|
|
146
|
+
});
|
|
141
147
|
}
|
|
142
148
|
},
|
|
143
149
|
updated: function updated() {
|
|
150
|
+
if (!this._calendar) {
|
|
151
|
+
this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
|
|
152
|
+
}
|
|
153
|
+
|
|
144
154
|
if (this.shouldFocusCalendar) {
|
|
145
155
|
this.focusCalendarElement();
|
|
146
156
|
}
|
|
@@ -152,19 +162,22 @@ var DateRangePicker = {
|
|
|
152
162
|
this.shouldFocusCalendar = false;
|
|
153
163
|
this.shouldFocusDateInput = false;
|
|
154
164
|
},
|
|
155
|
-
destroyed: function destroyed() {
|
|
156
|
-
clearTimeout(this.nextTickId);
|
|
157
|
-
},
|
|
158
165
|
data: function data() {
|
|
159
166
|
return {
|
|
160
|
-
|
|
161
|
-
|
|
167
|
+
currentShow: false,
|
|
168
|
+
currentValue: null,
|
|
169
|
+
valueDuringOnChange: undefined,
|
|
170
|
+
shouldFocusDateInput: false,
|
|
171
|
+
shouldFocusCalendar: false
|
|
162
172
|
};
|
|
163
173
|
},
|
|
164
174
|
computed: {
|
|
165
175
|
computedValue: function computedValue() {
|
|
166
|
-
var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.
|
|
176
|
+
var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentValue;
|
|
167
177
|
return value || EMPTY_SELECTIONRANGE;
|
|
178
|
+
},
|
|
179
|
+
computedShow: function computedShow() {
|
|
180
|
+
return this.$props.show !== undefined ? this.$props.show : this.currentShow;
|
|
168
181
|
}
|
|
169
182
|
},
|
|
170
183
|
// @ts-ignore
|
|
@@ -183,7 +196,7 @@ var DateRangePicker = {
|
|
|
183
196
|
var _this = this;
|
|
184
197
|
|
|
185
198
|
var h = gh || createElement;
|
|
186
|
-
var value = this.
|
|
199
|
+
var value = this.computedValue || EMPTY_SELECTIONRANGE;
|
|
187
200
|
var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
|
|
188
201
|
var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
|
|
189
202
|
var rootClassName = classNames('k-daterangepicker', {
|
|
@@ -193,9 +206,26 @@ var DateRangePicker = {
|
|
|
193
206
|
var startMessage = localizationService.toLanguageString(start, messages[start]);
|
|
194
207
|
var endMessage = localizationService.toLanguageString(end, messages[end]);
|
|
195
208
|
var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
|
|
196
|
-
|
|
197
|
-
var
|
|
209
|
+
var startDateInputRender = this.$props.startDateInput ? templateRendering.call(this, this.$props.startDateInput, getListeners.call(this)) : undefined;
|
|
210
|
+
var startDateInputDefaultRendering = // @ts-ignore
|
|
211
|
+
h(DateInput, {
|
|
212
|
+
ref: this.v3 ? function (el) {
|
|
213
|
+
_this.startDateInputRef = el;
|
|
214
|
+
} : 'startDateInput',
|
|
198
215
|
label: startMessage,
|
|
216
|
+
attrs: this.v3 ? undefined : {
|
|
217
|
+
label: startMessage,
|
|
218
|
+
format: this.$props.format,
|
|
219
|
+
min: this.min,
|
|
220
|
+
max: this.max,
|
|
221
|
+
id: this._startInputId,
|
|
222
|
+
disabled: this.$props.disabled,
|
|
223
|
+
valid: this.$props.valid,
|
|
224
|
+
ariaHasPopup: true,
|
|
225
|
+
ariaExpanded: this.computedShow // ...this.$props.startDateInputSettings,
|
|
226
|
+
,
|
|
227
|
+
value: value.start
|
|
228
|
+
},
|
|
199
229
|
format: this.$props.format,
|
|
200
230
|
min: this.min,
|
|
201
231
|
max: this.max,
|
|
@@ -203,14 +233,41 @@ var DateRangePicker = {
|
|
|
203
233
|
disabled: this.$props.disabled,
|
|
204
234
|
valid: this.$props.valid,
|
|
205
235
|
ariaHasPopup: true,
|
|
206
|
-
ariaExpanded: this.
|
|
207
|
-
}, this.$props.startDateInputSettings), {
|
|
236
|
+
ariaExpanded: this.computedShow,
|
|
208
237
|
value: value.start,
|
|
209
|
-
onChange: this.handleStartChange
|
|
238
|
+
onChange: this.handleStartChange,
|
|
239
|
+
on: this.v3 ? undefined : {
|
|
240
|
+
"change": this.handleStartChange
|
|
241
|
+
}
|
|
210
242
|
});
|
|
211
|
-
|
|
212
|
-
|
|
243
|
+
var startDateInputRendering = getTemplate.call(this, {
|
|
244
|
+
h: h,
|
|
245
|
+
template: startDateInputRender,
|
|
246
|
+
defaultRendering: startDateInputDefaultRendering,
|
|
247
|
+
additionalListeners: {
|
|
248
|
+
change: this.handleStartChange
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
var endDateInputRender = this.$props.endDateInput ? templateRendering.call(this, this.$props.endDateInput, getListeners.call(this)) : undefined;
|
|
252
|
+
var endDateInputDefaultRendering = // @ts-ignore
|
|
253
|
+
h(DateInput, {
|
|
254
|
+
ref: this.v3 ? function (el) {
|
|
255
|
+
_this.endDateInputRef = el;
|
|
256
|
+
} : 'endDateInput',
|
|
213
257
|
label: endMessage,
|
|
258
|
+
attrs: this.v3 ? undefined : {
|
|
259
|
+
label: endMessage,
|
|
260
|
+
format: this.$props.format,
|
|
261
|
+
min: this.min,
|
|
262
|
+
max: this.max,
|
|
263
|
+
id: this._endInputId,
|
|
264
|
+
disabled: this.$props.disabled,
|
|
265
|
+
valid: this.$props.valid,
|
|
266
|
+
ariaHasPopup: true,
|
|
267
|
+
ariaExpanded: this.computedShow // ...this.$props.endDateInputSettings,
|
|
268
|
+
,
|
|
269
|
+
value: value.end
|
|
270
|
+
},
|
|
214
271
|
format: this.$props.format,
|
|
215
272
|
min: this.min,
|
|
216
273
|
max: this.max,
|
|
@@ -218,142 +275,189 @@ var DateRangePicker = {
|
|
|
218
275
|
disabled: this.$props.disabled,
|
|
219
276
|
valid: this.$props.valid,
|
|
220
277
|
ariaHasPopup: true,
|
|
221
|
-
ariaExpanded: this.
|
|
222
|
-
}, this.$props.endDateInputSettings), {
|
|
278
|
+
ariaExpanded: this.computedShow,
|
|
223
279
|
value: value.end,
|
|
224
|
-
onChange: this.handleEndChange
|
|
280
|
+
onChange: this.handleEndChange,
|
|
281
|
+
on: this.v3 ? undefined : {
|
|
282
|
+
"change": this.handleEndChange
|
|
283
|
+
}
|
|
225
284
|
});
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
horizontal: 'left',
|
|
233
|
-
vertical: 'bottom'
|
|
234
|
-
},
|
|
235
|
-
popupAlign: {
|
|
236
|
-
horizontal: 'left',
|
|
237
|
-
vertical: 'top'
|
|
285
|
+
var endDateInputRendering = getTemplate.call(this, {
|
|
286
|
+
h: h,
|
|
287
|
+
template: endDateInputRender,
|
|
288
|
+
defaultRendering: endDateInputDefaultRendering,
|
|
289
|
+
additionalListeners: {
|
|
290
|
+
change: this.handleEndChange
|
|
238
291
|
}
|
|
239
|
-
}, this.$props.popupSettings), {
|
|
240
|
-
show: this.show
|
|
241
292
|
});
|
|
242
|
-
|
|
243
|
-
var
|
|
293
|
+
var calendarRender = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
|
|
294
|
+
var calendarDefaultRendering = // @ts-ignore
|
|
295
|
+
h(Calendar, {
|
|
296
|
+
ref: this.v3 ? function (el) {
|
|
297
|
+
_this.calendarRef = el;
|
|
298
|
+
} : 'calendar',
|
|
299
|
+
onKeydown: this.handleKeyDown,
|
|
300
|
+
on: this.v3 ? undefined : {
|
|
301
|
+
"keydown": this.handleKeyDown,
|
|
302
|
+
"focus": this.calendarFocus,
|
|
303
|
+
"blur": this.calendarBlur,
|
|
304
|
+
"change": this.handleCalendarChange
|
|
305
|
+
},
|
|
306
|
+
onFocus: this.calendarFocus,
|
|
307
|
+
onBlur: this.calendarBlur,
|
|
244
308
|
min: this.min,
|
|
309
|
+
attrs: this.v3 ? undefined : {
|
|
310
|
+
min: this.min,
|
|
311
|
+
max: this.max,
|
|
312
|
+
views: 2,
|
|
313
|
+
allowReverse: this.$props.allowReverse,
|
|
314
|
+
mode: 'range',
|
|
315
|
+
focusedDate: this.$props.focusedDate,
|
|
316
|
+
disabled: this.$props.disabled // ...this.$props.calendarSettings,
|
|
317
|
+
,
|
|
318
|
+
value: value
|
|
319
|
+
},
|
|
245
320
|
max: this.max,
|
|
321
|
+
views: 2,
|
|
246
322
|
allowReverse: this.$props.allowReverse,
|
|
247
323
|
mode: 'range',
|
|
248
324
|
focusedDate: this.$props.focusedDate,
|
|
249
|
-
disabled: this.$props.disabled
|
|
250
|
-
}, this.$props.calendarSettings), {
|
|
325
|
+
disabled: this.$props.disabled,
|
|
251
326
|
value: value,
|
|
252
327
|
onChange: this.handleCalendarChange
|
|
253
328
|
});
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
329
|
+
var calendarRendering = getTemplate.call(this, {
|
|
330
|
+
h: h,
|
|
331
|
+
template: calendarRender,
|
|
332
|
+
defaultRendering: calendarDefaultRendering,
|
|
333
|
+
additionalListeners: {
|
|
334
|
+
change: this.handleCalendarChange
|
|
335
|
+
}
|
|
336
|
+
});
|
|
337
|
+
var _a = this.$props.popupSettings,
|
|
338
|
+
popupClass = _a.popupClass,
|
|
339
|
+
animate = _a.animate,
|
|
340
|
+
appendTo = _a.appendTo;
|
|
341
|
+
var popupRender = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
|
|
342
|
+
var popupDefaultRendering = // @ts-ignore function children
|
|
343
|
+
h(Popup, {
|
|
344
|
+
show: this.computedShow,
|
|
345
|
+
attrs: this.v3 ? undefined : {
|
|
346
|
+
show: this.computedShow,
|
|
347
|
+
anchor: this._anchor,
|
|
348
|
+
id: this._popupId,
|
|
349
|
+
anchorAlign: {
|
|
350
|
+
horizontal: 'left',
|
|
351
|
+
vertical: 'bottom'
|
|
352
|
+
},
|
|
353
|
+
popupAlign: {
|
|
354
|
+
horizontal: 'left',
|
|
355
|
+
vertical: 'top'
|
|
356
|
+
},
|
|
357
|
+
animate: this.initialAnimation ? false : animate,
|
|
358
|
+
appendTo: appendTo
|
|
359
|
+
},
|
|
360
|
+
anchor: this._anchor,
|
|
361
|
+
id: this._popupId,
|
|
362
|
+
anchorAlign: {
|
|
363
|
+
horizontal: 'left',
|
|
364
|
+
vertical: 'bottom'
|
|
365
|
+
},
|
|
366
|
+
popupAlign: {
|
|
367
|
+
horizontal: 'left',
|
|
368
|
+
vertical: 'top'
|
|
369
|
+
},
|
|
370
|
+
animate: this.initialAnimation ? false : animate,
|
|
371
|
+
appendTo: appendTo,
|
|
372
|
+
"class": popupClass
|
|
373
|
+
}, this.v3 ? function () {
|
|
374
|
+
return [calendarRendering];
|
|
375
|
+
} : [calendarRendering]);
|
|
376
|
+
var popupRendering = getTemplate.call(this, {
|
|
377
|
+
h: h,
|
|
378
|
+
template: popupRender,
|
|
379
|
+
defaultRendering: popupDefaultRendering,
|
|
380
|
+
defaultSlots: calendarRendering
|
|
259
381
|
});
|
|
260
382
|
var reverseButton = h("span", {
|
|
261
383
|
role: "button",
|
|
262
384
|
attrs: this.v3 ? undefined : {
|
|
263
385
|
role: "button",
|
|
264
|
-
|
|
265
|
-
|
|
386
|
+
title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
|
|
387
|
+
"aria-controls": startDateInputId + ' ' + endDateInputId,
|
|
388
|
+
"aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
|
|
266
389
|
},
|
|
267
|
-
|
|
390
|
+
"class": "k-select k-button k-flat",
|
|
268
391
|
title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
|
|
269
|
-
|
|
392
|
+
onMousedown: this.handleReverseMouseDown,
|
|
270
393
|
on: this.v3 ? undefined : {
|
|
271
|
-
"
|
|
394
|
+
"mousedown": this.handleReverseMouseDown,
|
|
272
395
|
"click": this.handleReverseClick
|
|
273
396
|
},
|
|
274
|
-
onClick: this.handleReverseClick
|
|
397
|
+
onClick: this.handleReverseClick,
|
|
398
|
+
"aria-controls": startDateInputId + ' ' + endDateInputId,
|
|
399
|
+
"aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
|
|
275
400
|
}, [h("span", {
|
|
276
401
|
style: {
|
|
277
402
|
transform: 'rotate(90deg)'
|
|
278
403
|
},
|
|
279
|
-
|
|
280
|
-
attrs: this.v3 ? undefined : {
|
|
281
|
-
className: "k-icon k-i-arrows-swap"
|
|
282
|
-
}
|
|
404
|
+
"class": "k-icon k-i-arrows-swap"
|
|
283
405
|
})]);
|
|
284
406
|
return h("span", {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
className: rootClassName,
|
|
407
|
+
"class": rootClassName,
|
|
408
|
+
style: this.$props.style,
|
|
409
|
+
id: this.$props.id,
|
|
289
410
|
attrs: this.v3 ? undefined : {
|
|
290
|
-
className: rootClassName,
|
|
291
411
|
id: this.$props.id,
|
|
292
412
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
293
413
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
294
414
|
tabIndex: this.$props.tabIndex
|
|
295
415
|
},
|
|
296
|
-
style: this.$props.style,
|
|
297
|
-
id: this.$props.id,
|
|
298
416
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
299
417
|
"aria-describedby": this.$props.ariaDescribedBy,
|
|
300
418
|
tabIndex: this.$props.tabIndex,
|
|
301
|
-
|
|
419
|
+
onFocusin: this.handleFocus,
|
|
302
420
|
on: this.v3 ? undefined : {
|
|
303
|
-
"
|
|
304
|
-
"
|
|
305
|
-
"
|
|
421
|
+
"focusin": this.handleFocus,
|
|
422
|
+
"focusout": this.handleBlur,
|
|
423
|
+
"keydown": this.handleKeyDown
|
|
306
424
|
},
|
|
307
|
-
|
|
308
|
-
|
|
425
|
+
onFocusout: this.handleBlur,
|
|
426
|
+
onKeydown: this.handleKeyDown
|
|
309
427
|
}, [h("span", {
|
|
310
|
-
ref: function
|
|
311
|
-
_this.
|
|
312
|
-
},
|
|
313
|
-
|
|
314
|
-
attrs: this.v3 ? undefined : {
|
|
315
|
-
className: "k-daterangepicker-wrap"
|
|
316
|
-
},
|
|
428
|
+
ref: this.v3 ? function (el) {
|
|
429
|
+
_this.kendoAnchorRef = el;
|
|
430
|
+
} : this._anchor,
|
|
431
|
+
"class": "k-daterangepicker-wrap",
|
|
317
432
|
style: WRAPPER_STYLES
|
|
318
|
-
}, [this.$props.
|
|
319
|
-
h(DateInput // {...startDateInputProps}
|
|
320
|
-
, {
|
|
321
|
-
ref: this._startDateInput
|
|
322
|
-
}), (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, this.$props.endDateInput ? h(this.$props.endDateInput) : // @ts-ignore
|
|
323
|
-
h(DateInput // {...endDateInputProps}
|
|
324
|
-
, {
|
|
325
|
-
ref: this._endDateInput
|
|
326
|
-
})]), this.$props.popup ? h(this.$props.popup, [calendar]) : // @ts-ignore
|
|
327
|
-
h(Popup // {...popupProps}
|
|
328
|
-
, [calendar])]);
|
|
433
|
+
}, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering]), popupRendering]);
|
|
329
434
|
},
|
|
330
435
|
methods: {
|
|
331
436
|
focus: function focus() {
|
|
332
|
-
if (this.
|
|
333
|
-
this.
|
|
437
|
+
if (this._startDateInput) {
|
|
438
|
+
this._startDateInput.focus();
|
|
334
439
|
}
|
|
335
440
|
},
|
|
336
|
-
setCalendarRef: function setCalendarRef(calendar) {
|
|
337
|
-
this._calendar = calendar;
|
|
338
|
-
},
|
|
339
441
|
focusCalendarElement: function focusCalendarElement() {
|
|
340
|
-
|
|
341
|
-
|
|
442
|
+
var popup = document.getElementById(this._popupId);
|
|
443
|
+
|
|
444
|
+
if (this._calendar && popup) {
|
|
445
|
+
popup.getElementsByClassName('k-calendar-table')[0].focus({
|
|
342
446
|
preventScroll: true
|
|
343
447
|
});
|
|
344
448
|
}
|
|
345
449
|
},
|
|
346
450
|
focusDateInputElement: function focusDateInputElement() {
|
|
347
|
-
if (!document || !this.
|
|
451
|
+
if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
|
|
348
452
|
return;
|
|
349
453
|
}
|
|
350
454
|
|
|
351
|
-
if ((this.
|
|
352
|
-
this.
|
|
455
|
+
if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== this._endDateInput.element()) {
|
|
456
|
+
this._startDateInput.focus({
|
|
353
457
|
preventScroll: true
|
|
354
458
|
});
|
|
355
|
-
} else if (document.activeElement !== this.
|
|
356
|
-
this.
|
|
459
|
+
} else if (document.activeElement !== this._startDateInput.element()) {
|
|
460
|
+
this._endDateInput.focus({
|
|
357
461
|
preventScroll: true
|
|
358
462
|
});
|
|
359
463
|
}
|
|
@@ -367,26 +471,17 @@ var DateRangePicker = {
|
|
|
367
471
|
return nextProps.show !== undefined ? nextProps.show // @ts-ignore
|
|
368
472
|
: nextState.show;
|
|
369
473
|
},
|
|
370
|
-
// nextTick(f: () => any): void {
|
|
371
|
-
// // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
|
|
372
|
-
// // XXX: https://github.com/facebook/react/issues/3751
|
|
373
|
-
// // Handles multiple focus events happening at the same time.
|
|
374
|
-
// clearTimeout(this.nextTickId);
|
|
375
|
-
// this.nextTickId = window.setTimeout(() => f());
|
|
376
|
-
// },
|
|
377
474
|
setShow: function setShow(show) {
|
|
378
|
-
if (this.
|
|
475
|
+
if (this.currentShow === show) {
|
|
379
476
|
return;
|
|
380
477
|
}
|
|
381
478
|
|
|
382
|
-
this.
|
|
383
|
-
show: show
|
|
384
|
-
});
|
|
479
|
+
this.currentShow = show;
|
|
385
480
|
},
|
|
386
481
|
handleReverseClick: function handleReverseClick(event) {
|
|
387
482
|
var value = {
|
|
388
|
-
start: this.
|
|
389
|
-
end: this.
|
|
483
|
+
start: this.computedValue.end,
|
|
484
|
+
end: this.computedValue.start
|
|
390
485
|
};
|
|
391
486
|
var args = {
|
|
392
487
|
nativeEvent: event.nativeEvent
|
|
@@ -397,49 +492,53 @@ var DateRangePicker = {
|
|
|
397
492
|
event.preventDefault();
|
|
398
493
|
},
|
|
399
494
|
handleFocus: function handleFocus(event) {
|
|
400
|
-
clearTimeout(this.nextTickId);
|
|
401
|
-
|
|
402
495
|
if (!this.shouldFocusDateInput) {
|
|
403
496
|
this.setShow(true);
|
|
404
497
|
}
|
|
405
498
|
|
|
406
|
-
if (this.
|
|
407
|
-
this.
|
|
499
|
+
if (this._startDateInput && this._startDateInput.element()) {
|
|
500
|
+
this._startDateInput.element().classList.add('k-state-focused');
|
|
408
501
|
}
|
|
409
502
|
|
|
410
|
-
if (this.
|
|
411
|
-
this.
|
|
503
|
+
if (this._endDateInput && this._endDateInput.element()) {
|
|
504
|
+
this._endDateInput.element().classList.add('k-state-focused');
|
|
412
505
|
}
|
|
413
506
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
if (onFocus) {
|
|
417
|
-
onFocus.call(undefined, event);
|
|
418
|
-
}
|
|
507
|
+
this.$emit('focus', event);
|
|
419
508
|
},
|
|
420
|
-
|
|
509
|
+
calendarBlur: function calendarBlur() {
|
|
510
|
+
// this.$emit('blur', event);
|
|
511
|
+
clearTimeout(this._blurTimeout);
|
|
512
|
+
this.createBlurTimeout();
|
|
513
|
+
},
|
|
514
|
+
calendarFocus: function calendarFocus() {
|
|
515
|
+
// this.$emit('focus', event);
|
|
516
|
+
clearTimeout(this._blurTimeout);
|
|
517
|
+
},
|
|
518
|
+
createBlurTimeout: function createBlurTimeout() {
|
|
421
519
|
var _this = this;
|
|
422
520
|
|
|
423
|
-
this.
|
|
424
|
-
if (_this.
|
|
425
|
-
_this.
|
|
521
|
+
this._blurTimeout = setTimeout(function () {
|
|
522
|
+
if (_this._startDateInput && _this._startDateInput.element()) {
|
|
523
|
+
_this._startDateInput.element().classList.remove('k-state-focused');
|
|
426
524
|
}
|
|
427
525
|
|
|
428
|
-
if (_this.
|
|
429
|
-
_this.
|
|
526
|
+
if (_this._endDateInput && _this._endDateInput.element()) {
|
|
527
|
+
_this._endDateInput.element().classList.remove('k-state-focused');
|
|
430
528
|
}
|
|
431
529
|
|
|
432
|
-
_this.
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
530
|
+
if (_this._startDateInput && canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
|
|
531
|
+
_this.setShow(false);
|
|
532
|
+
}
|
|
533
|
+
}, 200);
|
|
534
|
+
},
|
|
535
|
+
handleBlur: function handleBlur(event) {
|
|
536
|
+
this.createBlurTimeout();
|
|
537
|
+
this.$emit('blur', event);
|
|
439
538
|
},
|
|
440
539
|
handleEndChange: function handleEndChange(event) {
|
|
441
540
|
var value = {
|
|
442
|
-
start: this.
|
|
541
|
+
start: this.computedValue.start,
|
|
443
542
|
end: cloneDate(event.value || undefined)
|
|
444
543
|
};
|
|
445
544
|
this.handleChange(value, event);
|
|
@@ -447,7 +546,7 @@ var DateRangePicker = {
|
|
|
447
546
|
handleStartChange: function handleStartChange(event) {
|
|
448
547
|
var value = {
|
|
449
548
|
start: cloneDate(event.value || undefined),
|
|
450
|
-
end: this.
|
|
549
|
+
end: this.computedValue.end
|
|
451
550
|
};
|
|
452
551
|
this.handleChange(value, event);
|
|
453
552
|
},
|
|
@@ -458,8 +557,8 @@ var DateRangePicker = {
|
|
|
458
557
|
|
|
459
558
|
var candidate = Array.isArray(event.value) ? event.value[0] : event.value;
|
|
460
559
|
return {
|
|
461
|
-
start: this.
|
|
462
|
-
end: this.
|
|
560
|
+
start: this.computedValue.end !== null ? candidate : this.computedValue.start,
|
|
561
|
+
end: this.computedValue.start !== null ? candidate : this.computedValue.end
|
|
463
562
|
};
|
|
464
563
|
},
|
|
465
564
|
handleCalendarChange: function handleCalendarChange(event) {
|
|
@@ -478,28 +577,21 @@ var DateRangePicker = {
|
|
|
478
577
|
event.preventDefault();
|
|
479
578
|
this.shouldFocusCalendar = true;
|
|
480
579
|
this.setShow(true);
|
|
481
|
-
} else if (keyCode === Keys.tab && this.
|
|
580
|
+
} else if (keyCode === Keys.tab && this.computedShow && this._calendar && this._calendar.$el && this._endDateInput && this._endDateInput.element() && document && document.activeElement === this._endDateInput.element()) {
|
|
482
581
|
event.preventDefault();
|
|
483
582
|
this.focusCalendarElement();
|
|
484
583
|
}
|
|
485
584
|
},
|
|
486
585
|
handleChange: function handleChange(value, event) {
|
|
487
|
-
this.
|
|
488
|
-
value: value
|
|
489
|
-
});
|
|
586
|
+
this.currentValue = value;
|
|
490
587
|
this.valueDuringOnChange = value;
|
|
491
|
-
var
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
target: this
|
|
499
|
-
};
|
|
500
|
-
onChange.call(undefined, args);
|
|
501
|
-
}
|
|
502
|
-
|
|
588
|
+
var args = {
|
|
589
|
+
event: event.event,
|
|
590
|
+
value: this.computedValue,
|
|
591
|
+
show: this.computedShow,
|
|
592
|
+
target: this
|
|
593
|
+
};
|
|
594
|
+
this.$emit('change', args);
|
|
503
595
|
this.valueDuringOnChange = undefined;
|
|
504
596
|
}
|
|
505
597
|
}
|