@progress/kendo-vue-dateinputs 2.6.4 → 2.6.5-dev.202112061452
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 +4 -2
- package/dist/es/daterangepicker/DateRangePicker.d.ts +7 -2
- package/dist/es/daterangepicker/DateRangePicker.js +148 -150
- package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts +0 -4
- package/dist/es/datetimepicker/DateTimePicker.js +3 -1
- package/dist/es/datetimepicker/DateTimeSelector.d.ts +2 -0
- package/dist/es/datetimepicker/DateTimeSelector.js +11 -2
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/calendar/components/Calendar.js +4 -2
- package/dist/npm/daterangepicker/DateRangePicker.d.ts +7 -2
- package/dist/npm/daterangepicker/DateRangePicker.js +146 -148
- package/dist/npm/daterangepicker/models/DateRangePickerSettings.d.ts +0 -4
- package/dist/npm/datetimepicker/DateTimePicker.js +3 -1
- package/dist/npm/datetimepicker/DateTimeSelector.d.ts +2 -0
- package/dist/npm/datetimepicker/DateTimeSelector.js +11 -2
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +7 -7
|
@@ -132,7 +132,7 @@ var Calendar = {
|
|
|
132
132
|
created: function created() {
|
|
133
133
|
kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
|
|
134
134
|
var value = utils_2.calculateValue(this.currentMin, this.currentMax, this.$props.defaultValue, this.$props.value || this.$props.modelValue);
|
|
135
|
-
var selectedDate =
|
|
135
|
+
var selectedDate = utils_2.extractDateFromValue(this.currentMin, this.currentMax, value);
|
|
136
136
|
var selectedMultiple = utils_2.extractMultipleFromValue(this.currentMin, this.currentMax, value);
|
|
137
137
|
var selectedRange = utils_2.extractRangeFromValue(value);
|
|
138
138
|
var calculatedFocus = utils_2.extractFocusedDate(selectedDate, selectedMultiple, selectedRange);
|
|
@@ -196,6 +196,9 @@ var Calendar = {
|
|
|
196
196
|
}
|
|
197
197
|
},
|
|
198
198
|
methods: {
|
|
199
|
+
element: function element() {
|
|
200
|
+
return this.$el;
|
|
201
|
+
},
|
|
199
202
|
computedValue: function computedValue() {
|
|
200
203
|
return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
|
|
201
204
|
},
|
|
@@ -448,7 +451,6 @@ var Calendar = {
|
|
|
448
451
|
var didValueChange = currentValue !== null && this._oldValue !== null ? !this.isValueEqual(currentValue, this._oldValue) : currentValue !== this._oldValue;
|
|
449
452
|
this._selectedDate = utils_2.extractDateFromValue(this.currentMin, this.currentMax, currentValue);
|
|
450
453
|
this._selectedMultiple = utils_2.extractMultipleFromValue(this.currentMin, this.currentMax, currentValue);
|
|
451
|
-
this._selectedRange = utils_2.extractRangeFromValue(currentValue);
|
|
452
454
|
var cell = kendo_vue_common_1.templateRendering.call(this, this.$props.cell, kendo_vue_common_1.getListeners.call(this));
|
|
453
455
|
var weekCell = kendo_vue_common_1.templateRendering.call(this, this.$props.weekCell, kendo_vue_common_1.getListeners.call(this));
|
|
454
456
|
var headerTitle = kendo_vue_common_1.templateRendering.call(this, this.$props.headerTitle, kendo_vue_common_1.getListeners.call(this));
|
|
@@ -10,16 +10,17 @@ import { DateRangePickerSettings } from './models';
|
|
|
10
10
|
* @hidden
|
|
11
11
|
*/
|
|
12
12
|
export interface ReverseClickEvent {
|
|
13
|
-
|
|
13
|
+
event?: any;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* The arguments for the `onChange` event of the DateRangePicker.
|
|
17
17
|
*/
|
|
18
18
|
export interface DateRangePickerChangeEvent {
|
|
19
|
-
|
|
19
|
+
event?: any;
|
|
20
20
|
value: SelectionRange;
|
|
21
21
|
show?: boolean;
|
|
22
22
|
target: any;
|
|
23
|
+
component?: any;
|
|
23
24
|
}
|
|
24
25
|
/**
|
|
25
26
|
* Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
|
|
@@ -68,6 +69,7 @@ export interface DateRangePickerState {
|
|
|
68
69
|
_popupId: string;
|
|
69
70
|
_startInputId: string;
|
|
70
71
|
_endInputId: string;
|
|
72
|
+
_calendarId: string;
|
|
71
73
|
shouldFocusDateInput: boolean;
|
|
72
74
|
shouldFocusCalendar: boolean;
|
|
73
75
|
initialAnimation: boolean;
|
|
@@ -77,6 +79,7 @@ export interface DateRangePickerState {
|
|
|
77
79
|
*/
|
|
78
80
|
export interface DateRangePickerComputed {
|
|
79
81
|
[key: string]: any;
|
|
82
|
+
rootClassName: object;
|
|
80
83
|
computedValue: SelectionRange;
|
|
81
84
|
computedShow: boolean;
|
|
82
85
|
}
|
|
@@ -85,6 +88,8 @@ export interface DateRangePickerComputed {
|
|
|
85
88
|
*/
|
|
86
89
|
export interface DateRangePickerMethods {
|
|
87
90
|
[key: string]: any;
|
|
91
|
+
getStartInput: () => any;
|
|
92
|
+
getEndInput: () => any;
|
|
88
93
|
}
|
|
89
94
|
/**
|
|
90
95
|
* @hidden
|
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var __assign = undefined && undefined.__assign || function () {
|
|
4
|
+
__assign = Object.assign || function (t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
|
|
8
|
+
for (var p in s) {
|
|
9
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return __assign.apply(this, arguments);
|
|
17
|
+
};
|
|
18
|
+
|
|
3
19
|
Object.defineProperty(exports, "__esModule", {
|
|
4
20
|
value: true
|
|
5
21
|
});
|
|
@@ -44,7 +60,8 @@ var DateRangePicker = {
|
|
|
44
60
|
emits: {
|
|
45
61
|
blur: null,
|
|
46
62
|
change: null,
|
|
47
|
-
focus: null
|
|
63
|
+
focus: null,
|
|
64
|
+
keydown: null
|
|
48
65
|
},
|
|
49
66
|
props: {
|
|
50
67
|
allowReverse: {
|
|
@@ -66,6 +83,8 @@ var DateRangePicker = {
|
|
|
66
83
|
type: Boolean,
|
|
67
84
|
default: false
|
|
68
85
|
},
|
|
86
|
+
popup: [String, Object, Function],
|
|
87
|
+
calendar: [String, Object, Function],
|
|
69
88
|
startDateInput: [String, Object, Function],
|
|
70
89
|
endDateInput: [String, Object, Function],
|
|
71
90
|
endDateInputSettings: Object,
|
|
@@ -76,26 +95,6 @@ var DateRangePicker = {
|
|
|
76
95
|
return 'd';
|
|
77
96
|
}
|
|
78
97
|
},
|
|
79
|
-
// PropTypes.oneOfType([
|
|
80
|
-
// PropTypes.string,
|
|
81
|
-
// PropTypes.shape({
|
|
82
|
-
// skeleton: PropTypes.string,
|
|
83
|
-
// pattern: PropTypes.string,
|
|
84
|
-
// date: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
|
|
85
|
-
// time: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
|
|
86
|
-
// datetime: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
|
|
87
|
-
// era: PropTypes.oneOf(['narrow', 'short', 'long']),
|
|
88
|
-
// year: PropTypes.oneOf(['numeric', '2-digit']),
|
|
89
|
-
// month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
|
|
90
|
-
// day: PropTypes.oneOf(['numeric', '2-digit']),
|
|
91
|
-
// weekday: PropTypes.oneOf(['narrow', 'short', 'long']),
|
|
92
|
-
// hour: PropTypes.oneOf(['numeric', '2-digit']),
|
|
93
|
-
// hour12: Boolean,
|
|
94
|
-
// minute: PropTypes.oneOf(['numeric', '2-digit']),
|
|
95
|
-
// second: PropTypes.oneOf(['numeric', '2-digit']),
|
|
96
|
-
// timeZoneName: PropTypes.oneOf(['short', 'long'])
|
|
97
|
-
// })
|
|
98
|
-
// ]),
|
|
99
98
|
id: String,
|
|
100
99
|
ariaLabelledBy: String,
|
|
101
100
|
ariaDescribedBy: String,
|
|
@@ -132,21 +131,19 @@ var DateRangePicker = {
|
|
|
132
131
|
default: function _default() {
|
|
133
132
|
return undefined;
|
|
134
133
|
}
|
|
135
|
-
}
|
|
136
|
-
|
|
134
|
+
}
|
|
137
135
|
},
|
|
138
136
|
created: function created() {
|
|
139
137
|
this._element = null;
|
|
140
138
|
this._wrapper = null;
|
|
141
139
|
this._calendar = null;
|
|
142
140
|
this._startDateInput = null;
|
|
143
|
-
this._endDateInput = null;
|
|
144
|
-
// this.showDuringOnChange?: boolean;
|
|
145
|
-
|
|
141
|
+
this._endDateInput = null;
|
|
146
142
|
this._popupId = kendo_vue_common_1.guid();
|
|
147
143
|
this._anchor = kendo_vue_common_1.guid();
|
|
148
144
|
this._startInputId = kendo_vue_common_1.guid();
|
|
149
145
|
this._endInputId = kendo_vue_common_1.guid();
|
|
146
|
+
this._calendarId = kendo_vue_common_1.guid();
|
|
150
147
|
kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
|
|
151
148
|
this.currentShow = this.$props.show || this.$props.defaultShow;
|
|
152
149
|
this.currentValue = this.$props.value || this.$props.defaultValue;
|
|
@@ -166,9 +163,9 @@ var DateRangePicker = {
|
|
|
166
163
|
}
|
|
167
164
|
},
|
|
168
165
|
updated: function updated() {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
166
|
+
this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
|
|
167
|
+
this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
|
|
168
|
+
this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
|
|
172
169
|
|
|
173
170
|
if (this.shouldFocusCalendar) {
|
|
174
171
|
this.focusCalendarElement();
|
|
@@ -191,6 +188,12 @@ var DateRangePicker = {
|
|
|
191
188
|
};
|
|
192
189
|
},
|
|
193
190
|
computed: {
|
|
191
|
+
rootClassName: function rootClassName() {
|
|
192
|
+
return {
|
|
193
|
+
'k-daterangepicker': true,
|
|
194
|
+
'k-state-disabled': this.$props.disabled
|
|
195
|
+
};
|
|
196
|
+
},
|
|
194
197
|
computedValue: function computedValue() {
|
|
195
198
|
var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentValue;
|
|
196
199
|
return value || models_1.EMPTY_SELECTIONRANGE;
|
|
@@ -218,33 +221,14 @@ var DateRangePicker = {
|
|
|
218
221
|
var value = this.computedValue || models_1.EMPTY_SELECTIONRANGE;
|
|
219
222
|
var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
|
|
220
223
|
var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
|
|
221
|
-
var rootClassName = kendo_vue_common_1.classNames('k-daterangepicker', {
|
|
222
|
-
'k-state-disabled': this.$props.disabled
|
|
223
|
-
}, this.$props.className);
|
|
224
224
|
var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
|
|
225
225
|
var startMessage = localizationService.toLanguageString(messages_1.start, messages_1.messages[messages_1.start]);
|
|
226
226
|
var endMessage = localizationService.toLanguageString(messages_1.end, messages_1.messages[messages_1.end]);
|
|
227
227
|
var separatorMessage = localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.separator]);
|
|
228
228
|
var startDateInputRender = this.$props.startDateInput ? kendo_vue_common_2.templateRendering.call(this, this.$props.startDateInput, kendo_vue_common_2.getListeners.call(this)) : undefined;
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
ref: this.v3 ? function (el) {
|
|
232
|
-
_this.startDateInputRef = el;
|
|
233
|
-
} : 'startDateInput',
|
|
229
|
+
|
|
230
|
+
var startSettings = __assign({
|
|
234
231
|
label: startMessage,
|
|
235
|
-
attrs: this.v3 ? undefined : {
|
|
236
|
-
label: startMessage,
|
|
237
|
-
format: this.$props.format,
|
|
238
|
-
min: this.min,
|
|
239
|
-
max: this.max,
|
|
240
|
-
id: this._startInputId,
|
|
241
|
-
disabled: this.$props.disabled,
|
|
242
|
-
valid: this.$props.valid,
|
|
243
|
-
ariaHasPopup: true,
|
|
244
|
-
ariaExpanded: this.computedShow // ...this.$props.startDateInputSettings,
|
|
245
|
-
,
|
|
246
|
-
value: value.start
|
|
247
|
-
},
|
|
248
232
|
format: this.$props.format,
|
|
249
233
|
min: this.min,
|
|
250
234
|
max: this.max,
|
|
@@ -253,12 +237,20 @@ var DateRangePicker = {
|
|
|
253
237
|
valid: this.$props.valid,
|
|
254
238
|
ariaHasPopup: true,
|
|
255
239
|
ariaExpanded: this.computedShow,
|
|
256
|
-
value: value.start
|
|
257
|
-
|
|
240
|
+
value: value.start
|
|
241
|
+
}, this.$props.startDateInputSettings);
|
|
242
|
+
|
|
243
|
+
var startDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
|
|
244
|
+
ref: this.v3 ? function (el) {
|
|
245
|
+
_this.startDateInputRef = el;
|
|
246
|
+
} : 'startDateInput',
|
|
247
|
+
attrs: this.v3 ? undefined : startSettings
|
|
248
|
+
}, startSettings), {
|
|
249
|
+
onChange: this.handleEndChange,
|
|
258
250
|
on: this.v3 ? undefined : {
|
|
259
|
-
|
|
251
|
+
'change': this.handleEndChange
|
|
260
252
|
}
|
|
261
|
-
});
|
|
253
|
+
}));
|
|
262
254
|
var startDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
|
|
263
255
|
h: h,
|
|
264
256
|
template: startDateInputRender,
|
|
@@ -268,25 +260,9 @@ var DateRangePicker = {
|
|
|
268
260
|
}
|
|
269
261
|
});
|
|
270
262
|
var endDateInputRender = this.$props.endDateInput ? kendo_vue_common_2.templateRendering.call(this, this.$props.endDateInput, kendo_vue_common_2.getListeners.call(this)) : undefined;
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
ref: this.v3 ? function (el) {
|
|
274
|
-
_this.endDateInputRef = el;
|
|
275
|
-
} : 'endDateInput',
|
|
263
|
+
|
|
264
|
+
var endSettings = __assign({
|
|
276
265
|
label: endMessage,
|
|
277
|
-
attrs: this.v3 ? undefined : {
|
|
278
|
-
label: endMessage,
|
|
279
|
-
format: this.$props.format,
|
|
280
|
-
min: this.min,
|
|
281
|
-
max: this.max,
|
|
282
|
-
id: this._endInputId,
|
|
283
|
-
disabled: this.$props.disabled,
|
|
284
|
-
valid: this.$props.valid,
|
|
285
|
-
ariaHasPopup: true,
|
|
286
|
-
ariaExpanded: this.computedShow // ...this.$props.endDateInputSettings,
|
|
287
|
-
,
|
|
288
|
-
value: value.end
|
|
289
|
-
},
|
|
290
266
|
format: this.$props.format,
|
|
291
267
|
min: this.min,
|
|
292
268
|
max: this.max,
|
|
@@ -295,12 +271,20 @@ var DateRangePicker = {
|
|
|
295
271
|
valid: this.$props.valid,
|
|
296
272
|
ariaHasPopup: true,
|
|
297
273
|
ariaExpanded: this.computedShow,
|
|
298
|
-
value: value.end
|
|
274
|
+
value: value.end
|
|
275
|
+
}, this.$props.endDateInputSettings);
|
|
276
|
+
|
|
277
|
+
var endDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
|
|
278
|
+
ref: this.v3 ? function (el) {
|
|
279
|
+
_this.endDateInputRef = el;
|
|
280
|
+
} : 'endDateInput',
|
|
281
|
+
attrs: this.v3 ? undefined : endSettings
|
|
282
|
+
}, endSettings), {
|
|
299
283
|
onChange: this.handleEndChange,
|
|
300
284
|
on: this.v3 ? undefined : {
|
|
301
|
-
|
|
285
|
+
'change': this.handleEndChange
|
|
302
286
|
}
|
|
303
|
-
});
|
|
287
|
+
}));
|
|
304
288
|
var endDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
|
|
305
289
|
h: h,
|
|
306
290
|
template: endDateInputRender,
|
|
@@ -310,72 +294,53 @@ var DateRangePicker = {
|
|
|
310
294
|
}
|
|
311
295
|
});
|
|
312
296
|
var calendarRender = this.$props.calendar ? kendo_vue_common_2.templateRendering.call(this, this.$props.calendar, kendo_vue_common_2.getListeners.call(this)) : undefined;
|
|
313
|
-
|
|
314
|
-
|
|
297
|
+
|
|
298
|
+
var calendarSettings = __assign({
|
|
299
|
+
id: this._calendarId,
|
|
300
|
+
min: this.min,
|
|
301
|
+
max: this.max,
|
|
302
|
+
views: 2,
|
|
303
|
+
allowReverse: this.$props.allowReverse,
|
|
304
|
+
mode: 'range',
|
|
305
|
+
focusedDate: this.$props.focusedDate,
|
|
306
|
+
disabled: this.$props.disabled,
|
|
307
|
+
value: value
|
|
308
|
+
}, this.$props.calendarSettings);
|
|
309
|
+
|
|
310
|
+
var calendarDefaultRendering = h(Calendar_1.Calendar, __assign({
|
|
315
311
|
ref: this.v3 ? function (el) {
|
|
316
312
|
_this.calendarRef = el;
|
|
317
313
|
} : 'calendar',
|
|
314
|
+
attrs: this.v3 ? undefined : calendarSettings,
|
|
318
315
|
onKeydown: this.handleKeyDown,
|
|
319
316
|
on: this.v3 ? undefined : {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
317
|
+
'keydown': this.handleKeyDown,
|
|
318
|
+
'focus': this.calendarFocus,
|
|
319
|
+
'blur': this.calendarBlur,
|
|
320
|
+
'change': this.handleCalendarChange
|
|
324
321
|
},
|
|
325
322
|
onFocus: this.calendarFocus,
|
|
326
323
|
onBlur: this.calendarBlur,
|
|
327
|
-
min: this.min,
|
|
328
|
-
attrs: this.v3 ? undefined : {
|
|
329
|
-
min: this.min,
|
|
330
|
-
max: this.max,
|
|
331
|
-
views: 2,
|
|
332
|
-
allowReverse: this.$props.allowReverse,
|
|
333
|
-
mode: 'range',
|
|
334
|
-
focusedDate: this.$props.focusedDate,
|
|
335
|
-
disabled: this.$props.disabled // ...this.$props.calendarSettings,
|
|
336
|
-
,
|
|
337
|
-
value: value
|
|
338
|
-
},
|
|
339
|
-
max: this.max,
|
|
340
|
-
views: 2,
|
|
341
|
-
allowReverse: this.$props.allowReverse,
|
|
342
|
-
mode: 'range',
|
|
343
|
-
focusedDate: this.$props.focusedDate,
|
|
344
|
-
disabled: this.$props.disabled,
|
|
345
|
-
value: value,
|
|
346
324
|
onChange: this.handleCalendarChange
|
|
347
|
-
});
|
|
325
|
+
}, calendarSettings));
|
|
348
326
|
var calendarRendering = kendo_vue_common_2.getTemplate.call(this, {
|
|
349
327
|
h: h,
|
|
350
328
|
template: calendarRender,
|
|
351
329
|
defaultRendering: calendarDefaultRendering,
|
|
352
330
|
additionalListeners: {
|
|
353
|
-
change: this.handleCalendarChange
|
|
331
|
+
change: this.handleCalendarChange,
|
|
332
|
+
keydown: this.handleKeyDown,
|
|
333
|
+
focus: this.calendarFocus,
|
|
334
|
+
blur: this.calendarBlur
|
|
354
335
|
}
|
|
355
336
|
});
|
|
356
337
|
var _a = this.$props.popupSettings,
|
|
357
338
|
popupClass = _a.popupClass,
|
|
358
|
-
animate = _a.animate
|
|
359
|
-
appendTo = _a.appendTo;
|
|
339
|
+
animate = _a.animate;
|
|
360
340
|
var popupRender = this.$props.popup ? kendo_vue_common_2.templateRendering.call(this, this.$props.popup, kendo_vue_common_2.getListeners.call(this)) : undefined;
|
|
361
|
-
|
|
362
|
-
|
|
341
|
+
|
|
342
|
+
var popupSettings = __assign({
|
|
363
343
|
show: this.computedShow,
|
|
364
|
-
attrs: this.v3 ? undefined : {
|
|
365
|
-
show: this.computedShow,
|
|
366
|
-
anchor: this._anchor,
|
|
367
|
-
id: this._popupId,
|
|
368
|
-
anchorAlign: {
|
|
369
|
-
horizontal: 'left',
|
|
370
|
-
vertical: 'bottom'
|
|
371
|
-
},
|
|
372
|
-
popupAlign: {
|
|
373
|
-
horizontal: 'left',
|
|
374
|
-
vertical: 'top'
|
|
375
|
-
},
|
|
376
|
-
animate: this.initialAnimation ? false : animate,
|
|
377
|
-
appendTo: appendTo
|
|
378
|
-
},
|
|
379
344
|
anchor: this._anchor,
|
|
380
345
|
id: this._popupId,
|
|
381
346
|
anchorAlign: {
|
|
@@ -386,10 +351,13 @@ var DateRangePicker = {
|
|
|
386
351
|
horizontal: 'left',
|
|
387
352
|
vertical: 'top'
|
|
388
353
|
},
|
|
389
|
-
animate: this.initialAnimation ? false : animate
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
354
|
+
animate: this.initialAnimation ? false : animate
|
|
355
|
+
}, this.$props.popupSettings);
|
|
356
|
+
|
|
357
|
+
var popupDefaultRendering = h(kendo_vue_popup_1.Popup, __assign({
|
|
358
|
+
attrs: this.v3 ? undefined : popupSettings,
|
|
359
|
+
'class': popupClass
|
|
360
|
+
}, popupSettings), this.v3 ? function () {
|
|
393
361
|
return [calendarRendering];
|
|
394
362
|
} : [calendarRendering]);
|
|
395
363
|
var popupRendering = kendo_vue_common_2.getTemplate.call(this, {
|
|
@@ -423,7 +391,7 @@ var DateRangePicker = {
|
|
|
423
391
|
"class": "k-icon k-i-arrows-swap"
|
|
424
392
|
})]);
|
|
425
393
|
return h("span", {
|
|
426
|
-
"class": rootClassName,
|
|
394
|
+
"class": this.rootClassName,
|
|
427
395
|
style: this.$props.style,
|
|
428
396
|
id: this.$props.id,
|
|
429
397
|
attrs: this.v3 ? undefined : {
|
|
@@ -453,30 +421,35 @@ var DateRangePicker = {
|
|
|
453
421
|
},
|
|
454
422
|
methods: {
|
|
455
423
|
focus: function focus() {
|
|
456
|
-
|
|
457
|
-
|
|
424
|
+
var startInput = this.getStartInput();
|
|
425
|
+
|
|
426
|
+
if (startInput) {
|
|
427
|
+
startInput.focus();
|
|
458
428
|
}
|
|
459
429
|
},
|
|
460
430
|
focusCalendarElement: function focusCalendarElement() {
|
|
461
|
-
var
|
|
431
|
+
var calendar = this.getCalendar();
|
|
462
432
|
|
|
463
|
-
if (
|
|
464
|
-
|
|
433
|
+
if (calendar) {
|
|
434
|
+
calendar.focus({
|
|
465
435
|
preventScroll: true
|
|
466
436
|
});
|
|
467
437
|
}
|
|
468
438
|
},
|
|
469
439
|
focusDateInputElement: function focusDateInputElement() {
|
|
470
|
-
|
|
440
|
+
var startInput = this.getStartInput();
|
|
441
|
+
var endInput = this.getEndInput();
|
|
442
|
+
|
|
443
|
+
if (!document || !startInput || !endInput) {
|
|
471
444
|
return;
|
|
472
445
|
}
|
|
473
446
|
|
|
474
|
-
if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !==
|
|
475
|
-
|
|
447
|
+
if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== endInput) {
|
|
448
|
+
startInput.focus({
|
|
476
449
|
preventScroll: true
|
|
477
450
|
});
|
|
478
|
-
} else if (document.activeElement !==
|
|
479
|
-
|
|
451
|
+
} else if (document.activeElement !== startInput) {
|
|
452
|
+
endInput.focus({
|
|
480
453
|
preventScroll: true
|
|
481
454
|
});
|
|
482
455
|
}
|
|
@@ -503,7 +476,7 @@ var DateRangePicker = {
|
|
|
503
476
|
end: this.computedValue.start
|
|
504
477
|
};
|
|
505
478
|
var args = {
|
|
506
|
-
|
|
479
|
+
event: event.event
|
|
507
480
|
};
|
|
508
481
|
this.handleChange(value, args);
|
|
509
482
|
},
|
|
@@ -511,16 +484,19 @@ var DateRangePicker = {
|
|
|
511
484
|
event.preventDefault();
|
|
512
485
|
},
|
|
513
486
|
handleFocus: function handleFocus(event) {
|
|
487
|
+
var startInput = this.getStartInput();
|
|
488
|
+
var endInput = this.getEndInput();
|
|
489
|
+
|
|
514
490
|
if (!this.shouldFocusDateInput) {
|
|
515
491
|
this.setShow(true);
|
|
516
492
|
}
|
|
517
493
|
|
|
518
|
-
if (
|
|
519
|
-
|
|
494
|
+
if (startInput) {
|
|
495
|
+
startInput.classList.add('k-state-focused');
|
|
520
496
|
}
|
|
521
497
|
|
|
522
|
-
if (
|
|
523
|
-
|
|
498
|
+
if (endInput) {
|
|
499
|
+
endInput.classList.add('k-state-focused');
|
|
524
500
|
}
|
|
525
501
|
|
|
526
502
|
this.$emit('focus', event);
|
|
@@ -538,19 +514,32 @@ var DateRangePicker = {
|
|
|
538
514
|
var _this = this;
|
|
539
515
|
|
|
540
516
|
this._blurTimeout = setTimeout(function () {
|
|
541
|
-
|
|
542
|
-
|
|
517
|
+
var startInput = _this.getStartInput();
|
|
518
|
+
|
|
519
|
+
var endInput = _this.getEndInput();
|
|
520
|
+
|
|
521
|
+
if (startInput) {
|
|
522
|
+
startInput.classList.remove('k-state-focused');
|
|
543
523
|
}
|
|
544
524
|
|
|
545
|
-
if (
|
|
546
|
-
|
|
525
|
+
if (endInput) {
|
|
526
|
+
endInput.classList.remove('k-state-focused');
|
|
547
527
|
}
|
|
548
528
|
|
|
549
|
-
if (
|
|
529
|
+
if (startInput && endInput && kendo_vue_common_1.canUseDOM && startInput && document.activeElement !== endInput) {
|
|
550
530
|
_this.setShow(false);
|
|
551
531
|
}
|
|
552
532
|
}, 200);
|
|
553
533
|
},
|
|
534
|
+
getStartInput: function getStartInput() {
|
|
535
|
+
return this._startDateInput && this._startDateInput.element ? this._startDateInput.element() : document.getElementById(this._startInputId);
|
|
536
|
+
},
|
|
537
|
+
getEndInput: function getEndInput() {
|
|
538
|
+
return this._endDateInput && this._endDateInput.element ? this._endDateInput.element() : document.getElementById(this._endInputId);
|
|
539
|
+
},
|
|
540
|
+
getCalendar: function getCalendar() {
|
|
541
|
+
return this._calendar && this._calendar.element ? this._calendar : document.getElementById(this._calendarId);
|
|
542
|
+
},
|
|
554
543
|
handleBlur: function handleBlur(event) {
|
|
555
544
|
this.createBlurTimeout();
|
|
556
545
|
this.$emit('blur', event);
|
|
@@ -587,6 +576,8 @@ var DateRangePicker = {
|
|
|
587
576
|
handleKeyDown: function handleKeyDown(event) {
|
|
588
577
|
var keyCode = event.keyCode,
|
|
589
578
|
altKey = event.altKey;
|
|
579
|
+
var endInput = this.getEndInput();
|
|
580
|
+
var calendar = this.getCalendar();
|
|
590
581
|
|
|
591
582
|
if (keyCode === kendo_vue_common_1.Keys.esc) {
|
|
592
583
|
event.preventDefault();
|
|
@@ -596,10 +587,12 @@ var DateRangePicker = {
|
|
|
596
587
|
event.preventDefault();
|
|
597
588
|
this.shouldFocusCalendar = true;
|
|
598
589
|
this.setShow(true);
|
|
599
|
-
} else if (keyCode === kendo_vue_common_1.Keys.tab && this.computedShow &&
|
|
590
|
+
} else if (keyCode === kendo_vue_common_1.Keys.tab && this.computedShow && calendar && endInput && document && document.activeElement === endInput) {
|
|
600
591
|
event.preventDefault();
|
|
601
592
|
this.focusCalendarElement();
|
|
602
593
|
}
|
|
594
|
+
|
|
595
|
+
this.$emit('keydown', event);
|
|
603
596
|
},
|
|
604
597
|
handleChange: function handleChange(value, event) {
|
|
605
598
|
this.currentValue = value;
|
|
@@ -608,7 +601,12 @@ var DateRangePicker = {
|
|
|
608
601
|
event: event.event,
|
|
609
602
|
value: this.computedValue,
|
|
610
603
|
show: this.computedShow,
|
|
611
|
-
|
|
604
|
+
component: this,
|
|
605
|
+
target: {
|
|
606
|
+
name: this.$props.name,
|
|
607
|
+
value: this.computedValue,
|
|
608
|
+
show: this.computedShow
|
|
609
|
+
}
|
|
612
610
|
};
|
|
613
611
|
this.$emit('change', args);
|
|
614
612
|
this.valueDuringOnChange = undefined;
|
|
@@ -35,10 +35,6 @@ export interface DateRangePickerSettings {
|
|
|
35
35
|
* Represents the additional props that can be passed to the [MultiViewCalendar]({% slug overview_multiviewcalendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-multiviewcalendar)).
|
|
36
36
|
*/
|
|
37
37
|
calendarSettings?: DateRangePickerCalendarSettings;
|
|
38
|
-
/**
|
|
39
|
-
* Sets the `className` of the DateRangePicker.
|
|
40
|
-
*/
|
|
41
|
-
className?: string;
|
|
42
38
|
/**
|
|
43
39
|
* Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
|
|
44
40
|
*/
|
|
@@ -388,7 +388,8 @@ var DateTimePicker = {
|
|
|
388
388
|
maxTime: maxTime,
|
|
389
389
|
focusedDate: focusedDate,
|
|
390
390
|
format: format,
|
|
391
|
-
calendar: calendar
|
|
391
|
+
calendar: calendar,
|
|
392
|
+
steps: steps
|
|
392
393
|
},
|
|
393
394
|
value: this.computedValue,
|
|
394
395
|
onChange: this.handleValueChange,
|
|
@@ -409,6 +410,7 @@ var DateTimePicker = {
|
|
|
409
410
|
focusedDate: focusedDate,
|
|
410
411
|
format: format,
|
|
411
412
|
calendar: calendar,
|
|
413
|
+
steps: steps,
|
|
412
414
|
onFocus: this.timeSelectorFocus,
|
|
413
415
|
onBlur: this.timeSelectorBlur,
|
|
414
416
|
onKeydown: this.handleKeyDown
|
|
@@ -4,6 +4,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
|
|
|
4
4
|
declare type DefaultMethods<V> = {
|
|
5
5
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
6
|
};
|
|
7
|
+
import { TimePickerIncrementalSteps } from '../timepicker/models';
|
|
7
8
|
import { DateFormatOptions } from '@progress/kendo-vue-intl';
|
|
8
9
|
import { CalendarChangeEvent } from '../main';
|
|
9
10
|
/**
|
|
@@ -36,6 +37,7 @@ export interface DateTimeSelectorProps {
|
|
|
36
37
|
minTime?: Date;
|
|
37
38
|
maxTime?: Date;
|
|
38
39
|
weekNumber?: boolean;
|
|
40
|
+
steps?: TimePickerIncrementalSteps;
|
|
39
41
|
focusedDate?: Date;
|
|
40
42
|
format?: string | DateFormatOptions;
|
|
41
43
|
calendar?: any;
|
|
@@ -69,6 +69,12 @@ var DateTimeSelector = {
|
|
|
69
69
|
type: Boolean,
|
|
70
70
|
default: false
|
|
71
71
|
},
|
|
72
|
+
steps: {
|
|
73
|
+
type: Object,
|
|
74
|
+
default: function _default() {
|
|
75
|
+
return {};
|
|
76
|
+
}
|
|
77
|
+
},
|
|
72
78
|
focusedDate: Date,
|
|
73
79
|
format: String,
|
|
74
80
|
calendar: Object
|
|
@@ -144,7 +150,8 @@ var DateTimeSelector = {
|
|
|
144
150
|
max = _a.max,
|
|
145
151
|
weekNumber = _a.weekNumber,
|
|
146
152
|
focusedDate = _a.focusedDate,
|
|
147
|
-
format = _a.format
|
|
153
|
+
format = _a.format,
|
|
154
|
+
steps = _a.steps;
|
|
148
155
|
var rootClassName = kendo_vue_common_1.classNames({
|
|
149
156
|
'k-date-tab': this.currentTab === 'date',
|
|
150
157
|
'k-time-tab': this.currentTab === 'time',
|
|
@@ -287,13 +294,15 @@ var DateTimeSelector = {
|
|
|
287
294
|
min: this.computedMinTime || utils_1.MIN_TIME,
|
|
288
295
|
max: this.computedMaxTime || utils_1.MAX_TIME,
|
|
289
296
|
value: this.timeValue,
|
|
290
|
-
format: format
|
|
297
|
+
format: format,
|
|
298
|
+
steps: steps
|
|
291
299
|
},
|
|
292
300
|
ref: 'timePart',
|
|
293
301
|
min: this.computedMinTime || utils_1.MIN_TIME,
|
|
294
302
|
max: this.computedMaxTime || utils_1.MAX_TIME,
|
|
295
303
|
value: this.timeValue,
|
|
296
304
|
format: format,
|
|
305
|
+
steps: steps,
|
|
297
306
|
onChange: this.handleTimeListContainerChange,
|
|
298
307
|
onMount: this.handleTimePartMount,
|
|
299
308
|
onFocus: this.handleFocus,
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-dateinputs',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1638801929,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
14
14
|
};
|