@progress/kendo-vue-dateinputs 2.6.4 → 2.6.5-dev.202112061452

package/dist/es/calendar/components/Calendar.js

@@ -113,7 +113,7 @@ var Calendar = {
   created: function created() {
     validatePackage(packageMetadata);
     var value = calculateValue(this.currentMin, this.currentMax, this.$props.defaultValue, this.$props.value || this.$props.modelValue);
-    var selectedDate = this.$props.views === 1 ? value : extractDateFromValue(this.currentMin, this.currentMax, value);
+    var selectedDate = extractDateFromValue(this.currentMin, this.currentMax, value);
     var selectedMultiple = extractMultipleFromValue(this.currentMin, this.currentMax, value);
     var selectedRange = extractRangeFromValue(value);
     var calculatedFocus = extractFocusedDate(selectedDate, selectedMultiple, selectedRange);
@@ -177,6 +177,9 @@ var Calendar = {
     }
   },
   methods: {
+    element: function element() {
+      return this.$el;
+    },
     computedValue: function computedValue() {
       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;
     },
@@ -429,7 +432,6 @@ var Calendar = {
     var didValueChange = currentValue !== null && this._oldValue !== null ? !this.isValueEqual(currentValue, this._oldValue) : currentValue !== this._oldValue;
     this._selectedDate = extractDateFromValue(this.currentMin, this.currentMax, currentValue);
     this._selectedMultiple = extractMultipleFromValue(this.currentMin, this.currentMax, currentValue);
-    this._selectedRange = extractRangeFromValue(currentValue);
     var cell = templateRendering.call(this, this.$props.cell, getListeners.call(this));
     var weekCell = templateRendering.call(this, this.$props.weekCell, getListeners.call(this));
     var headerTitle = templateRendering.call(this, this.$props.headerTitle, getListeners.call(this));

package/dist/es/daterangepicker/DateRangePicker.d.ts

@@ -10,16 +10,17 @@ import { DateRangePickerSettings } from './models';
  * @hidden
  */
 export interface ReverseClickEvent {
-    nativeEvent?: any;
+    event?: any;
 }
 /**
  * The arguments for the `onChange` event of the DateRangePicker.
  */
 export interface DateRangePickerChangeEvent {
-    nativeEvent?: any;
+    event?: any;
     value: SelectionRange;
     show?: boolean;
     target: any;
+    component?: any;
 }
 /**
  * Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
@@ -68,6 +69,7 @@ export interface DateRangePickerState {
     _popupId: string;
     _startInputId: string;
     _endInputId: string;
+    _calendarId: string;
     shouldFocusDateInput: boolean;
     shouldFocusCalendar: boolean;
     initialAnimation: boolean;
@@ -77,6 +79,7 @@ export interface DateRangePickerState {
  */
 export interface DateRangePickerComputed {
     [key: string]: any;
+    rootClassName: object;
     computedValue: SelectionRange;
     computedShow: boolean;
 }
@@ -85,6 +88,8 @@ export interface DateRangePickerComputed {
  */
 export interface DateRangePickerMethods {
     [key: string]: any;
+    getStartInput: () => any;
+    getEndInput: () => any;
 }
 /**
  * @hidden

package/dist/es/daterangepicker/DateRangePicker.js

@@ -1,4 +1,20 @@
-// @ts-ignore
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -6,7 +22,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { guid, classNames, Keys, canUseDOM } from '@progress/kendo-vue-common';
+import { guid, Keys, canUseDOM } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -25,7 +41,8 @@ var DateRangePicker = {
   emits: {
     blur: null,
     change: null,
-    focus: null
+    focus: null,
+    keydown: null
   },
   props: {
     allowReverse: {
@@ -47,6 +64,8 @@ var DateRangePicker = {
       type: Boolean,
       default: false
     },
+    popup: [String, Object, Function],
+    calendar: [String, Object, Function],
     startDateInput: [String, Object, Function],
     endDateInput: [String, Object, Function],
     endDateInputSettings: Object,
@@ -57,26 +76,6 @@ var DateRangePicker = {
         return 'd';
       }
     },
-    // PropTypes.oneOfType([
-    //     PropTypes.string,
-    //     PropTypes.shape({
-    //         skeleton: PropTypes.string,
-    //         pattern: PropTypes.string,
-    //         date: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         time: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         datetime: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         era: PropTypes.oneOf(['narrow', 'short', 'long']),
-    //         year: PropTypes.oneOf(['numeric', '2-digit']),
-    //         month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
-    //         day: PropTypes.oneOf(['numeric', '2-digit']),
-    //         weekday: PropTypes.oneOf(['narrow', 'short', 'long']),
-    //         hour: PropTypes.oneOf(['numeric', '2-digit']),
-    //         hour12: Boolean,
-    //         minute: PropTypes.oneOf(['numeric', '2-digit']),
-    //         second: PropTypes.oneOf(['numeric', '2-digit']),
-    //         timeZoneName: PropTypes.oneOf(['short', 'long'])
-    //     })
-    // ]),
     id: String,
     ariaLabelledBy: String,
     ariaDescribedBy: String,
@@ -113,21 +112,19 @@ var DateRangePicker = {
       default: function _default() {
         return undefined;
       }
-    } // PropTypes.shape({ start: Date, end: Date })
-
+    }
   },
   created: function created() {
     this._element = null;
     this._wrapper = null;
     this._calendar = null;
     this._startDateInput = null;
-    this._endDateInput = null; // this.valueDuringOnChange = undefined;
-    // this.showDuringOnChange?: boolean;
-
+    this._endDateInput = null;
     this._popupId = guid();
     this._anchor = guid();
     this._startInputId = guid();
     this._endInputId = guid();
+    this._calendarId = guid();
     validatePackage(packageMetadata);
     this.currentShow = this.$props.show || this.$props.defaultShow;
     this.currentValue = this.$props.value || this.$props.defaultValue;
@@ -147,9 +144,9 @@ var DateRangePicker = {
     }
   },
   updated: function updated() {
-    if (!this._calendar) {
-      this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
-    }
+    this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
+    this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
+    this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
 
     if (this.shouldFocusCalendar) {
       this.focusCalendarElement();
@@ -172,6 +169,12 @@ var DateRangePicker = {
     };
   },
   computed: {
+    rootClassName: function rootClassName() {
+      return {
+        'k-daterangepicker': true,
+        'k-state-disabled': this.$props.disabled
+      };
+    },
     computedValue: function computedValue() {
       var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentValue;
       return value || EMPTY_SELECTIONRANGE;
@@ -199,33 +202,14 @@ var DateRangePicker = {
     var value = this.computedValue || EMPTY_SELECTIONRANGE;
     var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
     var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
-    var rootClassName = classNames('k-daterangepicker', {
-      'k-state-disabled': this.$props.disabled
-    }, this.$props.className);
     var localizationService = provideLocalizationService(this);
     var startMessage = localizationService.toLanguageString(start, messages[start]);
     var endMessage = localizationService.toLanguageString(end, messages[end]);
     var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
     var startDateInputRender = this.$props.startDateInput ? templateRendering.call(this, this.$props.startDateInput, getListeners.call(this)) : undefined;
-    var startDateInputDefaultRendering = // @ts-ignore
-    h(DateInput, {
-      ref: this.v3 ? function (el) {
-        _this.startDateInputRef = el;
-      } : 'startDateInput',
+
+    var startSettings = __assign({
       label: startMessage,
-      attrs: this.v3 ? undefined : {
-        label: startMessage,
-        format: this.$props.format,
-        min: this.min,
-        max: this.max,
-        id: this._startInputId,
-        disabled: this.$props.disabled,
-        valid: this.$props.valid,
-        ariaHasPopup: true,
-        ariaExpanded: this.computedShow //  ...this.$props.startDateInputSettings,
-        ,
-        value: value.start
-      },
       format: this.$props.format,
       min: this.min,
       max: this.max,
@@ -234,12 +218,20 @@ var DateRangePicker = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.start,
-      onChange: this.handleStartChange,
+      value: value.start
+    }, this.$props.startDateInputSettings);
+
+    var startDateInputDefaultRendering = h(DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.startDateInputRef = el;
+      } : 'startDateInput',
+      attrs: this.v3 ? undefined : startSettings
+    }, startSettings), {
+      onChange: this.handleEndChange,
       on: this.v3 ? undefined : {
-        "change": this.handleStartChange
+        'change': this.handleEndChange
       }
-    });
+    }));
     var startDateInputRendering = getTemplate.call(this, {
       h: h,
       template: startDateInputRender,
@@ -249,25 +241,9 @@ var DateRangePicker = {
       }
     });
     var endDateInputRender = this.$props.endDateInput ? templateRendering.call(this, this.$props.endDateInput, getListeners.call(this)) : undefined;
-    var endDateInputDefaultRendering = // @ts-ignore
-    h(DateInput, {
-      ref: this.v3 ? function (el) {
-        _this.endDateInputRef = el;
-      } : 'endDateInput',
+
+    var endSettings = __assign({
       label: endMessage,
-      attrs: this.v3 ? undefined : {
-        label: endMessage,
-        format: this.$props.format,
-        min: this.min,
-        max: this.max,
-        id: this._endInputId,
-        disabled: this.$props.disabled,
-        valid: this.$props.valid,
-        ariaHasPopup: true,
-        ariaExpanded: this.computedShow // ...this.$props.endDateInputSettings,
-        ,
-        value: value.end
-      },
       format: this.$props.format,
       min: this.min,
       max: this.max,
@@ -276,12 +252,20 @@ var DateRangePicker = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.end,
+      value: value.end
+    }, this.$props.endDateInputSettings);
+
+    var endDateInputDefaultRendering = h(DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.endDateInputRef = el;
+      } : 'endDateInput',
+      attrs: this.v3 ? undefined : endSettings
+    }, endSettings), {
       onChange: this.handleEndChange,
       on: this.v3 ? undefined : {
-        "change": this.handleEndChange
+        'change': this.handleEndChange
       }
-    });
+    }));
     var endDateInputRendering = getTemplate.call(this, {
       h: h,
       template: endDateInputRender,
@@ -291,72 +275,53 @@ var DateRangePicker = {
       }
     });
     var calendarRender = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
-    var calendarDefaultRendering = // @ts-ignore
-    h(Calendar, {
+
+    var calendarSettings = __assign({
+      id: this._calendarId,
+      min: this.min,
+      max: this.max,
+      views: 2,
+      allowReverse: this.$props.allowReverse,
+      mode: 'range',
+      focusedDate: this.$props.focusedDate,
+      disabled: this.$props.disabled,
+      value: value
+    }, this.$props.calendarSettings);
+
+    var calendarDefaultRendering = h(Calendar, __assign({
       ref: this.v3 ? function (el) {
         _this.calendarRef = el;
       } : 'calendar',
+      attrs: this.v3 ? undefined : calendarSettings,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
-        "keydown": this.handleKeyDown,
-        "focus": this.calendarFocus,
-        "blur": this.calendarBlur,
-        "change": this.handleCalendarChange
+        'keydown': this.handleKeyDown,
+        'focus': this.calendarFocus,
+        'blur': this.calendarBlur,
+        'change': this.handleCalendarChange
       },
       onFocus: this.calendarFocus,
       onBlur: this.calendarBlur,
-      min: this.min,
-      attrs: this.v3 ? undefined : {
-        min: this.min,
-        max: this.max,
-        views: 2,
-        allowReverse: this.$props.allowReverse,
-        mode: 'range',
-        focusedDate: this.$props.focusedDate,
-        disabled: this.$props.disabled //   ...this.$props.calendarSettings,
-        ,
-        value: value
-      },
-      max: this.max,
-      views: 2,
-      allowReverse: this.$props.allowReverse,
-      mode: 'range',
-      focusedDate: this.$props.focusedDate,
-      disabled: this.$props.disabled,
-      value: value,
       onChange: this.handleCalendarChange
-    });
+    }, calendarSettings));
     var calendarRendering = getTemplate.call(this, {
       h: h,
       template: calendarRender,
       defaultRendering: calendarDefaultRendering,
       additionalListeners: {
-        change: this.handleCalendarChange
+        change: this.handleCalendarChange,
+        keydown: this.handleKeyDown,
+        focus: this.calendarFocus,
+        blur: this.calendarBlur
       }
     });
     var _a = this.$props.popupSettings,
         popupClass = _a.popupClass,
-        animate = _a.animate,
-        appendTo = _a.appendTo;
+        animate = _a.animate;
     var popupRender = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
-    var popupDefaultRendering = // @ts-ignore function children
-    h(Popup, {
+
+    var popupSettings = __assign({
       show: this.computedShow,
-      attrs: this.v3 ? undefined : {
-        show: this.computedShow,
-        anchor: this._anchor,
-        id: this._popupId,
-        anchorAlign: {
-          horizontal: 'left',
-          vertical: 'bottom'
-        },
-        popupAlign: {
-          horizontal: 'left',
-          vertical: 'top'
-        },
-        animate: this.initialAnimation ? false : animate,
-        appendTo: appendTo
-      },
       anchor: this._anchor,
       id: this._popupId,
       anchorAlign: {
@@ -367,10 +332,13 @@ var DateRangePicker = {
         horizontal: 'left',
         vertical: 'top'
       },
-      animate: this.initialAnimation ? false : animate,
-      appendTo: appendTo,
-      "class": popupClass
-    }, this.v3 ? function () {
+      animate: this.initialAnimation ? false : animate
+    }, this.$props.popupSettings);
+
+    var popupDefaultRendering = h(Popup, __assign({
+      attrs: this.v3 ? undefined : popupSettings,
+      'class': popupClass
+    }, popupSettings), this.v3 ? function () {
       return [calendarRendering];
     } : [calendarRendering]);
     var popupRendering = getTemplate.call(this, {
@@ -404,7 +372,7 @@ var DateRangePicker = {
       "class": "k-icon k-i-arrows-swap"
     })]);
     return h("span", {
-      "class": rootClassName,
+      "class": this.rootClassName,
       style: this.$props.style,
       id: this.$props.id,
       attrs: this.v3 ? undefined : {
@@ -434,30 +402,35 @@ var DateRangePicker = {
   },
   methods: {
     focus: function focus() {
-      if (this._startDateInput) {
-        this._startDateInput.focus();
+      var startInput = this.getStartInput();
+
+      if (startInput) {
+        startInput.focus();
       }
     },
     focusCalendarElement: function focusCalendarElement() {
-      var popup = document.getElementById(this._popupId);
+      var calendar = this.getCalendar();
 
-      if (this._calendar && popup) {
-        popup.getElementsByClassName('k-calendar-table')[0].focus({
+      if (calendar) {
+        calendar.focus({
           preventScroll: true
         });
       }
     },
     focusDateInputElement: function focusDateInputElement() {
-      if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
+      if (!document || !startInput || !endInput) {
         return;
       }
 
-      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== this._endDateInput.element()) {
-        this._startDateInput.focus({
+      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== endInput) {
+        startInput.focus({
           preventScroll: true
         });
-      } else if (document.activeElement !== this._startDateInput.element()) {
-        this._endDateInput.focus({
+      } else if (document.activeElement !== startInput) {
+        endInput.focus({
           preventScroll: true
         });
       }
@@ -484,7 +457,7 @@ var DateRangePicker = {
         end: this.computedValue.start
       };
       var args = {
-        nativeEvent: event.nativeEvent
+        event: event.event
       };
       this.handleChange(value, args);
     },
@@ -492,16 +465,19 @@ var DateRangePicker = {
       event.preventDefault();
     },
     handleFocus: function handleFocus(event) {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
       if (!this.shouldFocusDateInput) {
         this.setShow(true);
       }
 
-      if (this._startDateInput && this._startDateInput.element()) {
-        this._startDateInput.element().classList.add('k-state-focused');
+      if (startInput) {
+        startInput.classList.add('k-state-focused');
       }
 
-      if (this._endDateInput && this._endDateInput.element()) {
-        this._endDateInput.element().classList.add('k-state-focused');
+      if (endInput) {
+        endInput.classList.add('k-state-focused');
       }
 
       this.$emit('focus', event);
@@ -519,19 +495,32 @@ var DateRangePicker = {
       var _this = this;
 
       this._blurTimeout = setTimeout(function () {
-        if (_this._startDateInput && _this._startDateInput.element()) {
-          _this._startDateInput.element().classList.remove('k-state-focused');
+        var startInput = _this.getStartInput();
+
+        var endInput = _this.getEndInput();
+
+        if (startInput) {
+          startInput.classList.remove('k-state-focused');
         }
 
-        if (_this._endDateInput && _this._endDateInput.element()) {
-          _this._endDateInput.element().classList.remove('k-state-focused');
+        if (endInput) {
+          endInput.classList.remove('k-state-focused');
         }
 
-        if (_this._startDateInput && canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
+        if (startInput && endInput && canUseDOM && startInput && document.activeElement !== endInput) {
           _this.setShow(false);
         }
       }, 200);
     },
+    getStartInput: function getStartInput() {
+      return this._startDateInput && this._startDateInput.element ? this._startDateInput.element() : document.getElementById(this._startInputId);
+    },
+    getEndInput: function getEndInput() {
+      return this._endDateInput && this._endDateInput.element ? this._endDateInput.element() : document.getElementById(this._endInputId);
+    },
+    getCalendar: function getCalendar() {
+      return this._calendar && this._calendar.element ? this._calendar : document.getElementById(this._calendarId);
+    },
     handleBlur: function handleBlur(event) {
       this.createBlurTimeout();
       this.$emit('blur', event);
@@ -568,6 +557,8 @@ var DateRangePicker = {
     handleKeyDown: function handleKeyDown(event) {
       var keyCode = event.keyCode,
           altKey = event.altKey;
+      var endInput = this.getEndInput();
+      var calendar = this.getCalendar();
 
       if (keyCode === Keys.esc) {
         event.preventDefault();
@@ -577,10 +568,12 @@ var DateRangePicker = {
         event.preventDefault();
         this.shouldFocusCalendar = true;
         this.setShow(true);
-      } else if (keyCode === Keys.tab && this.computedShow && this._calendar && this._calendar.$el && this._endDateInput && this._endDateInput.element() && document && document.activeElement === this._endDateInput.element()) {
+      } else if (keyCode === Keys.tab && this.computedShow && calendar && endInput && document && document.activeElement === endInput) {
         event.preventDefault();
         this.focusCalendarElement();
       }
+
+      this.$emit('keydown', event);
     },
     handleChange: function handleChange(value, event) {
       this.currentValue = value;
@@ -589,7 +582,12 @@ var DateRangePicker = {
         event: event.event,
         value: this.computedValue,
         show: this.computedShow,
-        target: this
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          show: this.computedShow
+        }
       };
       this.$emit('change', args);
       this.valueDuringOnChange = undefined;

package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -35,10 +35,6 @@ export interface DateRangePickerSettings {
      * 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)).
      */
     calendarSettings?: DateRangePickerCalendarSettings;
-    /**
-     * Sets the `className` of the DateRangePicker.
-     */
-    className?: string;
     /**
      * Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
      */

package/dist/es/datetimepicker/DateTimePicker.js

@@ -367,7 +367,8 @@ var DateTimePicker = {
         maxTime: maxTime,
         focusedDate: focusedDate,
         format: format,
-        calendar: calendar
+        calendar: calendar,
+        steps: steps
       },
       value: this.computedValue,
       onChange: this.handleValueChange,
@@ -388,6 +389,7 @@ var DateTimePicker = {
       focusedDate: focusedDate,
       format: format,
       calendar: calendar,
+      steps: steps,
       onFocus: this.timeSelectorFocus,
       onBlur: this.timeSelectorBlur,
       onKeydown: this.handleKeyDown

package/dist/es/datetimepicker/DateTimeSelector.d.ts

@@ -4,6 +4,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { TimePickerIncrementalSteps } from '../timepicker/models';
 import { DateFormatOptions } from '@progress/kendo-vue-intl';
 import { CalendarChangeEvent } from '../main';
 /**
@@ -36,6 +37,7 @@ export interface DateTimeSelectorProps {
     minTime?: Date;
     maxTime?: Date;
     weekNumber?: boolean;
+    steps?: TimePickerIncrementalSteps;
     focusedDate?: Date;
     format?: string | DateFormatOptions;
     calendar?: any;

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -51,6 +51,12 @@ var DateTimeSelector = {
       type: Boolean,
       default: false
     },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     focusedDate: Date,
     format: String,
     calendar: Object
@@ -126,7 +132,8 @@ var DateTimeSelector = {
         max = _a.max,
         weekNumber = _a.weekNumber,
         focusedDate = _a.focusedDate,
-        format = _a.format;
+        format = _a.format,
+        steps = _a.steps;
     var rootClassName = classNames({
       'k-date-tab': this.currentTab === 'date',
       'k-time-tab': this.currentTab === 'time',
@@ -269,13 +276,15 @@ var DateTimeSelector = {
         min: this.computedMinTime || MIN_TIME,
         max: this.computedMaxTime || MAX_TIME,
         value: this.timeValue,
-        format: format
+        format: format,
+        steps: steps
       },
       ref: 'timePart',
       min: this.computedMinTime || MIN_TIME,
       max: this.computedMaxTime || MAX_TIME,
       value: this.timeValue,
       format: format,
+      steps: steps,
       onChange: this.handleTimeListContainerChange,
       onMount: this.handleTimePartMount,
       onFocus: this.handleFocus,

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1638285376,
+    publishDate: 1638801929,
     version: '',
     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'
 };