@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.
@@ -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 = this.$props.views === 1 ? value : utils_2.extractDateFromValue(this.currentMin, this.currentMax, value);
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
- nativeEvent?: any;
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
- nativeEvent?: any;
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
- } // PropTypes.shape({ start: Date, end: Date })
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; // this.valueDuringOnChange = undefined;
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
- if (!this._calendar) {
170
- this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
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
- var startDateInputDefaultRendering = // @ts-ignore
230
- h(DateInput_1.DateInput, {
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
- onChange: this.handleStartChange,
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
- "change": this.handleStartChange
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
- var endDateInputDefaultRendering = // @ts-ignore
272
- h(DateInput_1.DateInput, {
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
- "change": this.handleEndChange
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
- var calendarDefaultRendering = // @ts-ignore
314
- h(Calendar_1.Calendar, {
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
- "keydown": this.handleKeyDown,
321
- "focus": this.calendarFocus,
322
- "blur": this.calendarBlur,
323
- "change": this.handleCalendarChange
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
- var popupDefaultRendering = // @ts-ignore function children
362
- h(kendo_vue_popup_1.Popup, {
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
- appendTo: appendTo,
391
- "class": popupClass
392
- }, this.v3 ? function () {
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
- if (this._startDateInput) {
457
- this._startDateInput.focus();
424
+ var startInput = this.getStartInput();
425
+
426
+ if (startInput) {
427
+ startInput.focus();
458
428
  }
459
429
  },
460
430
  focusCalendarElement: function focusCalendarElement() {
461
- var popup = document.getElementById(this._popupId);
431
+ var calendar = this.getCalendar();
462
432
 
463
- if (this._calendar && popup) {
464
- popup.getElementsByClassName('k-calendar-table')[0].focus({
433
+ if (calendar) {
434
+ calendar.focus({
465
435
  preventScroll: true
466
436
  });
467
437
  }
468
438
  },
469
439
  focusDateInputElement: function focusDateInputElement() {
470
- if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
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 !== this._endDateInput.element()) {
475
- this._startDateInput.focus({
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 !== this._startDateInput.element()) {
479
- this._endDateInput.focus({
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
- nativeEvent: event.nativeEvent
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 (this._startDateInput && this._startDateInput.element()) {
519
- this._startDateInput.element().classList.add('k-state-focused');
494
+ if (startInput) {
495
+ startInput.classList.add('k-state-focused');
520
496
  }
521
497
 
522
- if (this._endDateInput && this._endDateInput.element()) {
523
- this._endDateInput.element().classList.add('k-state-focused');
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
- if (_this._startDateInput && _this._startDateInput.element()) {
542
- _this._startDateInput.element().classList.remove('k-state-focused');
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 (_this._endDateInput && _this._endDateInput.element()) {
546
- _this._endDateInput.element().classList.remove('k-state-focused');
525
+ if (endInput) {
526
+ endInput.classList.remove('k-state-focused');
547
527
  }
548
528
 
549
- if (_this._startDateInput && kendo_vue_common_1.canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
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 && this._calendar && this._calendar.$el && this._endDateInput && this._endDateInput.element() && document && document.activeElement === this._endDateInput.element()) {
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
- target: this
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: 1638285376,
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
  };