@progress/kendo-angular-dateinputs 14.0.0-develop.7 → 14.0.0-develop.9

package/fesm2020/progress-kendo-angular-dateinputs.mjs

@@ -12,7 +12,7 @@ import * as i8 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
-import { IntlModule } from '@progress/kendo-angular-intl';
+import { localeData, IntlModule } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -20,6 +20,7 @@ import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, ca
 import * as i10 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
+import { DateInput } from '@progress/kendo-dateinputs-common';
 import * as i7$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
@@ -36,8 +37,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1696412824,
-    version: '14.0.0-develop.7',
+    publishDate: 1696584725,
+    version: '14.0.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7033,424 +7034,37 @@ let nextId = 0;
 const MIN_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK$1 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
 const VALUE_DOC_LINK$3 = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
-const DATE_PART_REGEXP = /year|month|<day>/;
-const TIME_PART_REGEXP = /hour|minute|second|millisecond/;
-const SHORT_PATTERN_LENGTH_REGEXP = /d|M|H|h|m|s/;
 const TWO_DIGIT_YEAR_MAX$2 = 68;
-const PREVIOUS_CENTURY_BASE = 1900;
-const CURRENT_CENTURY_BASE = 2000;
 const DEFAULT_FORMAT$1 = 'd';
-const padZero = (length) => new Array(Math.max(length, 0)).fill('0').join('');
-const unpadZero = (value) => value.replace(/^0*/, '');
-class Mask {
-    constructor() {
-        this.symbols = "";
-    }
-}
-class KendoDate {
-    constructor(intl, formatPlaceholder, format, value, twoDigitYearMax = TWO_DIGIT_YEAR_MAX$2) {
-        this.intl = intl;
-        this.formatPlaceholder = formatPlaceholder;
-        this.format = format;
-        this.twoDigitYearMax = twoDigitYearMax;
-        this.year = true;
-        this.month = true;
-        this.date = true;
-        this.hours = true;
-        this.minutes = true;
-        this.seconds = true;
-        this.milliseconds = true;
-        this.leadingZero = null;
-        this.monthNames = null;
-        this.typedMonthPart = "";
-        this.value = getDate(new Date());
-        this.knownParts = "adHhmMsSEy";
-        this.symbols = {
-            "E": "E",
-            "H": "H",
-            "M": "M",
-            "a": "a",
-            "d": "d",
-            "h": "h",
-            "m": "m",
-            "s": "s",
-            "S": "S",
-            "y": "y"
-        };
-        validatePackage(packageMetadata);
-        this.monthNames = this.allFormatedMonths();
-        this.dayPeriods = this.allDayPeriods();
-        if (!value) {
-            this.value = getDate(new Date());
-            const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
-            for (let i = 0; i < sampleFormat.length; i++) {
-                this.setExisting(sampleFormat[i], false);
-            }
-        }
-        else {
-            this.value = cloneDate(value);
-        }
-    }
-    hasValue() {
-        const pred = (a, p) => a || p.type !== 'literal' && p.type !== 'dayperiod' && this.getExisting(p.pattern[0]);
-        return this.intl.splitDateFormat(this.format).reduce(pred, false);
-    }
-    shouldNormalizeCentury() {
-        return this.intl.splitDateFormat(this.format).some(part => part.pattern === 'yy');
-    }
-    getDateObject() {
-        for (let i = 0; i < this.knownParts.length; i++) {
-            if (!this.getExisting(this.knownParts[i])) {
-                return null;
-            }
-        }
-        return cloneDate(this.value);
-    }
-    getTextAndFormat(format) {
-        return this.merge(this.intl.formatDate(this.value, format), this.dateFormatString(this.value, format));
-    }
-    getExisting(symbol) {
-        switch (symbol) {
-            case "y": return this.year;
-            case "M":
-            case "L": return this.month;
-            case "d": return this.date;
-            case "E": return this.date && this.month && this.year;
-            case "h":
-            case "H": return this.hours;
-            case "m": return this.minutes;
-            case "s": return this.seconds;
-            case "S": return this.milliseconds;
-            default: return true;
-        }
-    }
-    setExisting(symbol, value) {
-        switch (symbol) {
-            case "y":
-                this.year = value;
-                if (value === false) {
-                    this.value.setFullYear(2000);
-                }
-                break; //allow 2/29 dates
-            case "M":
-                this.month = value;
-                if (value === false) {
-                    this.value.setMonth(0);
-                }
-                break; //make sure you can type 31 at day part
-            case "d":
-                this.date = value;
-                break;
-            case "h":
-            case "H":
-                this.hours = value;
-                break;
-            case "m":
-                this.minutes = value;
-                break;
-            case "s":
-                this.seconds = value;
-                break;
-            case "S":
-                this.milliseconds = value;
-                break;
-            default: return;
-        }
-    }
-    modifyPart(symbol, offset) {
-        let newValue = cloneDate(this.value);
-        switch (symbol) {
-            case "y":
-                newValue.setFullYear(newValue.getFullYear() + offset);
-                break;
-            case "M":
-                newValue = addMonths(this.value, offset);
-                break;
-            case "d":
-            case "E":
-                newValue.setDate(newValue.getDate() + offset);
-                break;
-            case "h":
-            case "H":
-                newValue.setHours(newValue.getHours() + offset);
-                break;
-            case "m":
-                newValue.setMinutes(newValue.getMinutes() + offset);
-                break;
-            case "s":
-                newValue.setSeconds(newValue.getSeconds() + offset);
-                break;
-            case "S":
-                newValue.setMilliseconds(newValue.getMilliseconds() + offset);
-                break;
-            case "a":
-                newValue.setHours(newValue.getHours() + (12 * offset));
-                break;
-            default: break;
-        }
-        if (this.shouldNormalizeCentury()) {
-            newValue = this.normalizeCentury(newValue);
-        }
-        if (newValue.getFullYear() > 0) {
-            this.setExisting(symbol, true);
-            this.value = newValue;
-        }
-    }
-    parsePart(symbol, currentChar, resetSegmentValue) {
-        if (!currentChar) {
-            this.resetLeadingZero();
-            this.setExisting(symbol, false);
-            return { value: null, switchToNext: false };
-        }
-        const baseDate = this.intl.formatDate(this.value, this.format);
-        const dateParts = this.dateFormatString(this.value, this.format);
-        const baseFormat = dateParts.symbols;
-        let replaced = false;
-        let prefix = "";
-        let current = "";
-        let suffix = "";
-        for (let i = 0; i < baseDate.length; i++) {
-            if (baseFormat[i] === symbol) {
-                current += this.getExisting(symbol) ? baseDate[i] : "0";
-                replaced = true;
-            }
-            else if (!replaced) {
-                prefix += baseDate[i];
-            }
-            else {
-                suffix += baseDate[i];
-            }
-        }
-        const currentMaxLength = current.length - 3;
-        let parsedDate = null;
-        const month = this.matchMonth(currentChar);
-        const dayPeriod = this.matchDayPeriod(currentChar, symbol);
-        const isZeroCurrentChar = currentChar === '0';
-        const leadingZero = (this.leadingZero || {})[symbol] || 0;
-        if (isZeroCurrentChar) {
-            const valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
-            if (valueNumber === 0 && !this.isAbbrMonth(dateParts.partMap, symbol)) {
-                this.incrementLeadingZero(symbol);
-            }
-        }
-        else {
-            this.resetLeadingZero();
-        }
-        for (let i = Math.max(0, currentMaxLength); i <= current.length; i++) {
-            let middle = resetSegmentValue ? currentChar : (current.substring(i) + currentChar);
-            if (symbol === "S" && resetSegmentValue) {
-                // The "S" parser in intl parses "1" as 100ms in order to handle ISOString dates correctly, so to get 1ms, we need to pass "001"
-                const padding = msPaddingFromFormat(baseFormat);
-                middle = padding + middle;
-            }
-            const middleNumber = parseInt(middle, 10);
-            parsedDate = this.intl.parseDate(prefix + middle + suffix, this.format);
-            if (!parsedDate && !isNaN(middleNumber) && !isNaN(parseInt(currentChar, 10))) {
-                if (symbol === 'M' && !month) {
-                    const monthNumber = middleNumber - 1;
-                    if (monthNumber > -1 && monthNumber < 12) {
-                        parsedDate = cloneDate(this.value);
-                        parsedDate.setMonth(monthNumber);
-                        if (parsedDate.getMonth() !== monthNumber) {
-                            parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));
-                        }
-                    }
-                }
-                if (symbol === 'y') {
-                    parsedDate = createDate(parseInt(middle, 10), this.month ? this.value.getMonth() : 0, this.date ? this.value.getDate() : 1, this.hours ? this.value.getHours() : 0, this.minutes ? this.value.getMinutes() : 0, this.seconds ? this.value.getSeconds() : 0, this.milliseconds ? this.value.getMilliseconds() : 0);
-                    if (this.date && parsedDate.getDate() !== this.value.getDate()) {
-                        parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));
-                    }
-                }
-            }
-            if (parsedDate) {
-                //move to next segment if the part will overflow with next char
-                //when start from empty date (01, then 010), padded zeros should be trimmed
-                const patternValue = this.partPattern(dateParts.partMap, symbol).pattern;
-                const peekDate = this.intl.parseDate(`${prefix}${this.peek(middle, patternValue)}${suffix}`, this.format);
-                const patternLength = this.patternLength(patternValue) || patternValue.length;
-                const patternSatisfied = (leadingZero + (unpadZero(middle) || currentChar).length) >= patternLength;
-                const switchToNext = peekDate === null || patternSatisfied;
-                if (this.shouldNormalizeCentury()) {
-                    parsedDate = this.normalizeCentury(parsedDate);
-                }
-                this.value = parsedDate;
-                this.setExisting(symbol, true);
-                return { value: this.value, switchToNext: switchToNext };
-            }
-        }
-        if (month) {
-            parsedDate = this.intl.parseDate(prefix + month + suffix, this.format);
-            if (parsedDate) {
-                this.value = parsedDate;
-                this.setExisting(symbol, true);
-                return { value: this.value, switchToNext: false };
-            }
-        }
-        if (dayPeriod) {
-            parsedDate = this.intl.parseDate(prefix + dayPeriod + suffix, this.format);
-            if (parsedDate) {
-                this.value = parsedDate;
-                return { value: this.value, switchToNext: true };
-            }
-        }
-        if (isZeroCurrentChar) {
-            this.setExisting(symbol, false);
-        }
-        return { value: null, switchToNext: false };
-    }
-    resetLeadingZero() {
-        const hasLeadingZero = this.leadingZero !== null;
-        this.setLeadingZero(null);
-        return hasLeadingZero;
-    }
-    setLeadingZero(leadingZero) {
-        this.leadingZero = leadingZero;
-    }
-    normalizeCentury(date) {
-        if (!isPresent(date)) {
-            return date;
-        }
-        const twoDigitYear = cropTwoDigitYear(date);
-        const centuryBase = this.getNormalizedCenturyBase(twoDigitYear);
-        const normalizedDate = setYears(date, centuryBase + twoDigitYear);
-        return normalizedDate;
-    }
-    incrementLeadingZero(symbol) {
-        const leadingZero = this.leadingZero || {};
-        leadingZero[symbol] = (leadingZero[symbol] || 0) + 1;
-        this.leadingZero = leadingZero;
-    }
-    isAbbrMonth(parts, symbol) {
-        const pattern = this.partPattern(parts, symbol);
-        return pattern.type === 'month' && pattern.names;
-    }
-    partPattern(parts, symbol) {
-        return parts.filter((part) => part.pattern.indexOf(symbol) !== -1)[0];
-    }
-    peek(value, pattern) {
-        const peekValue = unpadZero(value) + '0';
-        return padZero(pattern.length - peekValue.length) + peekValue;
-    }
-    matchMonth(typedChar) {
-        this.typedMonthPart += typedChar.toLowerCase();
-        if (!this.monthNames) {
-            return "";
-        }
-        while (this.typedMonthPart.length > 0) {
-            for (let i = 0; i < this.monthNames.length; i++) {
-                if (this.monthNames[i].toLowerCase().indexOf(this.typedMonthPart) === 0) {
-                    return this.monthNames[i];
-                }
-            }
-            const monthAsNum = parseInt(this.typedMonthPart, 10);
-            if (monthAsNum >= 1 && monthAsNum <= 12 && monthAsNum.toString() === this.typedMonthPart /*ensure they exact match*/) {
-                return this.monthNames[monthAsNum - 1];
-            }
-            this.typedMonthPart = this.typedMonthPart.substring(1, this.typedMonthPart.length);
-        }
-        return "";
-    }
-    matchDayPeriod(typedChar, symbol) {
-        const lowerChart = String(typedChar).toLowerCase();
-        if (symbol === 'a' && this.dayPeriods) {
-            if (this.dayPeriods.am.toLowerCase().startsWith(lowerChart)) {
-                return this.dayPeriods.am;
-            }
-            else if (this.dayPeriods.pm.toLowerCase().startsWith(lowerChart)) {
-                return this.dayPeriods.pm;
-            }
-        }
-        return '';
-    }
-    allFormatedMonths() {
-        const dateFormatParts = this.intl.splitDateFormat(this.format);
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            if (dateFormatParts[i].type === "month" && dateFormatParts[i].names) {
-                return this.intl.dateFormatNames(dateFormatParts[i].names);
-            }
-        }
-        return null;
-    }
-    allDayPeriods() {
-        const dateFormatParts = this.intl.splitDateFormat(this.format);
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            if (dateFormatParts[i].type === "dayperiod" && dateFormatParts[i].names) {
-                return this.intl.dateFormatNames(dateFormatParts[i].names);
-            }
-        }
-        return null;
-    }
-    patternLength(pattern) {
-        if (pattern[0] === 'y') {
-            return 4;
-        }
-        if (SHORT_PATTERN_LENGTH_REGEXP.test(pattern)) {
-            return 2;
-        }
-        return 0;
-    }
-    //TODO: REMOVE!
-    dateFormatString(date, format) {
-        const dateFormatParts = this.intl.splitDateFormat(format);
-        const parts = [];
-        const partMap = [];
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            let partLength = this.intl.formatDate(date, { pattern: dateFormatParts[i].pattern }).length;
-            while (partLength > 0) {
-                parts.push(this.symbols[dateFormatParts[i].pattern[0]] || "_");
-                partMap.push(dateFormatParts[i]);
-                partLength--;
-            }
-        }
-        const returnValue = new Mask();
-        returnValue.symbols = parts.join("");
-        returnValue.partMap = partMap;
-        return returnValue;
-    }
-    merge(text, mask) {
-        // Important: right to left.
-        let resultText = "";
-        let resultFormat = "";
-        const format = mask.symbols;
-        for (let r = format.length - 1; r >= 0; r--) {
-            if (this.knownParts.indexOf(format[r]) === -1 || this.getExisting(format[r])) {
-                resultText = text[r] + resultText;
-                resultFormat = format[r] + resultFormat;
-            }
-            else {
-                const currentSymbol = format[r];
-                while (r >= 0 && currentSymbol === format[r]) {
-                    r--;
-                }
-                r++;
-                if (this.leadingZero && this.leadingZero[currentSymbol]) {
-                    resultText = '0' + resultText;
-                }
-                else {
-                    resultText = this.dateFieldName(mask.partMap[r]) + resultText;
-                }
-                while (resultFormat.length < resultText.length) {
-                    resultFormat = format[r] + resultFormat;
-                }
-            }
-        }
-        return [resultText, resultFormat];
-    }
-    dateFieldName(part) {
-        const formatPlaceholder = this.formatPlaceholder || 'wide';
-        if (formatPlaceholder[part.type]) {
-            return formatPlaceholder[part.type];
-        }
-        if (formatPlaceholder === 'formatPattern') {
-            return part.pattern;
-        }
-        return this.intl.dateFieldName(Object.assign(part, { nameType: formatPlaceholder }));
-    }
-    getNormalizedCenturyBase(twoDigitYear) {
-        return twoDigitYear > this.twoDigitYearMax ?
-            PREVIOUS_CENTURY_BASE :
-            CURRENT_CENTURY_BASE;
+const DEFAULT_FORMAT_PLACEHOLDER = 'wide';
+const DATE_PART_REGEXP = /year|month|<day>/;
+const TIME_PART_REGEXP = /hour|minute|second|millisecond/;
+/**
+ * @hidden
+ * Need to overrite `dateFormatNames` parameters order and provide `cldr` object
+ * required by the kendo-dateinputs-common package
+ */
+class DateInputIntl {
+    constructor(service) {
+        this.service = service;
+        this.cldr = {};
+        this.localeId = service['localeId'];
+        this.format = service.format;
+        this.toString = service.toString;
+        this.formatDate = service.formatDate;
+        this.parseDate = service.parseDate;
+        this.parseNumber = service.parseNumber;
+        this.formatNumber = service.formatNumber;
+        this.splitDateFormat = service.splitDateFormat;
+        this.numberSymbols = service.numberSymbols;
+        this.firstDay = service.firstDay;
+        this.weekendRange = service.weekendRange;
+        this.dateFieldName = service.dateFieldName;
+        this.dateFormatNames = (localeId, options) => this.service.dateFormatNames(options, localeId || this.localeId);
+        const _localeData = localeData(this.localeId);
+        // Setting the `cldr` object from here could be avoided if the logic in the common package is revisited to 
+        // directly relies on the `localeId` being set as part of the options => TBD and validated for all suites
+        this.cldr[_localeData.name] = _localeData;
     }
 }
 /**
@@ -7546,16 +7160,50 @@ class DateInputComponent {
          * }
          * ```
          */
-        this.steps = {};
+        this.steps = {
+            // Default values are needed until fix in common package: https://github.com/telerik/kendo-dateinputs-common/issues/26
+            second: 1,
+            minute: 1,
+            hour: 1,
+            day: 1,
+            month: 1,
+            year: 1
+        };
         /**
          * Determines whether the built-in min or max validators are to be enforced when a form is being validated.
          */
         this.rangeValidation = true;
         /**
          * @hidden
-         * Based on the min and max values, specifies whether the value will be auto-corrected while typing.
+         *
+         * Determines whether to auto correct invalid segments automatically.
+         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         *
+         * @default true
+         */
+        this.autoCorrectParts = true;
+        /**
+         * Determines whether to automatically move to the next segment after the user completes the current one.
+         *
+         * @default true
+         */
+        this.autoSwitchParts = true;
+        /**
+         * A string array representing custom keys, which will move the focus to the next date format segment.
+         */
+        this.autoSwitchKeys = [];
+        /**
+         * Determines if the users should see a blinking caret inside the Date Input when possible.
+         *
+         * @default false
          */
-        this.autoCorrect = false;
+        this.allowCaretMode = false;
+        /**
+         * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+         *
+         * @default false
+         */
+        this.autoFill = false;
         /**
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
@@ -7568,6 +7216,12 @@ class DateInputComponent {
          * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX$2;
+        /**
+         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+         *
+         * @default true
+         */
+        this.enableMouseWheel = true;
         /**
          * Specifies whether the **Up** and **Down** spin buttons will be rendered.
          * For more information, refer to the article on
@@ -7644,18 +7298,16 @@ class DateInputComponent {
          * @hidden
          */
         this.isDateIncomplete = false;
-        this.currentValue = "";
         this.currentFormat = "";
-        this.backspace = false;
-        this.resetSegmentValue = true;
         this.minValidator = noop$2;
         this.maxValidator = noop$2;
         this.incompleteValidator = noop$2;
         this._value = null;
         this._active = false;
         this._focusableId = `dateinput-${nextId++}`;
+        this._formatPlaceholder = DEFAULT_FORMAT_PLACEHOLDER;
         this.kendoDate = null;
-        this.paste = false;
+        this.kendoDateObject = null;
         this.domEvents = [];
         this.onControlChange = noop$2;
         this.onControlTouched = noop$2;
@@ -7664,8 +7316,7 @@ class DateInputComponent {
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
         this.subs = new Subscription();
-        this.symbolsMap = this.dateSymbolMap();
-        this.updateFormatSections();
+        validatePackage(packageMetadata);
         if (this.pickerService) {
             this.pickerService.input = this;
         }
@@ -7702,6 +7353,58 @@ class DateInputComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Defines the descriptions of the format sections in the input field.
+     * For more information, refer to the article on
+     * [placeholders]({% slug placeholders_dateinput %}).
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     * <div class="row example-wrapper" [style.min-height.px]="450">
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Full-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Narrow-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Short-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Display defined format:</p>
+     *    <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Custom defined format descriptions</p>
+     *    <kendo-dateinput format="G"
+     *      [formatPlaceholder]="{
+     *        year: 'y', month: 'M', day: 'd',
+     *        hour: 'h', minute: 'm', second: 's'
+     *      }"
+     *    ></kendo-dateinput>
+     *  </div>
+     * </div>
+     * `
+     * })
+     * export class AppComponent { }
+     * ```
+     */
+    set formatPlaceholder(format) {
+        this._formatPlaceholder = format ? format : DEFAULT_FORMAT_PLACEHOLDER;
+    }
+    get formatPlaceholder() {
+        return this._formatPlaceholder;
+    }
     /**
      * Specifies the value of the DateInput component.
      *
@@ -7709,9 +7412,6 @@ class DateInputComponent {
      */
     set value(value) {
         this.verifyValue(value);
-        if (this.autoCorrect && !isInRange(value, this.min, this.max)) {
-            return;
-        }
         this._value = cloneDate(value);
         this.valueUpdate.emit(cloneDate(value));
     }
@@ -7823,34 +7523,39 @@ class DateInputComponent {
         const ngControl = this.injector.get(NgControl, null);
         return ngControl?.control || null;
     }
-    get inputFormat() {
-        if (!this.format) {
-            return DEFAULT_FORMAT$1;
-        }
-        if (typeof this.format === 'string') {
-            return this.format;
-        }
-        else {
-            return this.format.inputFormat;
-        }
-    }
-    get displayFormat() {
-        if (!this.format) {
-            return DEFAULT_FORMAT$1;
-        }
-        if (typeof this.format === 'string') {
-            return this.format;
-        }
-        else {
-            return this.format.displayFormat;
-        }
+    get options() {
+        return {
+            format: this.format,
+            steps: this.steps,
+            readonly: this.readonly,
+            formatPlaceholder: this.formatPlaceholder,
+            placeholder: this.placeholder,
+            autoCorrectParts: this.autoCorrectParts,
+            autoSwitchParts: this.autoSwitchParts,
+            selectPreviousSegmentOnBackspace: true,
+            autoSwitchKeys: this.autoSwitchKeys,
+            twoDigitYearMax: this.twoDigitYearMax,
+            enableMouseWheel: this.enableMouseWheel,
+            selectNearestSegmentOnFocus: false,
+            allowCaretMode: this.allowCaretMode,
+            autoFill: this.autoFill,
+            value: this.value,
+            intlService: new DateInputIntl(this.intl)
+        };
     }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
      */
     isEmpty() {
-        return !this.currentValue || !String(this.currentValue).trim();
+        const currentValue = this.dateInput.nativeElement.value;
+        return !currentValue || !String(currentValue).trim();
+    }
+    /**
+     * @hidden
+     */
+    handleDragAndDrop(args) {
+        args.preventDefault();
     }
     /**
      * @hidden
@@ -7862,15 +7567,16 @@ class DateInputComponent {
      * @hidden
      */
     ngOnInit() {
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue();
+        if (this.kendoDate) {
+            this.kendoDate.destroy();
+        }
+        this.kendoDate = this.initKendoDate();
+        this.kendoDateObject = this.kendoDate.dateObject;
+        this.updateFormatSections();
         this.subs.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
         this.ngControl = this.injector.get(NgControl, null);
         if (this.wrapper) {
             this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-            this.ngZone.runOutsideAngular(() => {
-                this.bindEvents();
-            });
         }
     }
     /**
@@ -7884,14 +7590,37 @@ class DateInputComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop$2;
             this.onValidatorChange();
         }
-        if (changes['format']) {
-            this.symbolsMap = this.dateSymbolMap();
+        const isEqualToKendoDate = this.kendoDate && isEqual(this.value, this.kendoDate.value);
+        if (changes['format'] || !isEqualToKendoDate || changes['placeholder']) {
+            if (!this.kendoDate) {
+                return;
+            }
+            ;
+            this.kendoDate?.setOptions(this.options, true);
             this.updateFormatSections();
         }
-        const isEqualToKendoDate = this.kendoDate && isEqual(this.value, this.kendoDate.getDateObject());
-        if (changes['format'] || !isEqualToKendoDate || changes['placeholder']) {
-            this.kendoDate = this.getKendoDate(this.value);
-            this.updateElementValue(this.isActive);
+    }
+    updateFormatSections() {
+        this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)
+            .reduce(({ date, time }, p) => {
+            return {
+                date: date || DATE_PART_REGEXP.test(p.type),
+                time: time || TIME_PART_REGEXP.test(p.type)
+            };
+        }, { date: false, time: false });
+    }
+    updateIncompleteValidationStatus() {
+        const previousValue = this.isDateIncomplete;
+        this.isDateIncomplete = this.kendoDateObject.hasValue() && this.value === null;
+        if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) {
+            return;
+        }
+        if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
+            this.cdr.markForCheck();
+            this.ngZone.run(() => this.onValidatorChange());
+        }
+        else if (isPresent(this.pickerService)) {
+            this.pickerService.dateCompletenessChange.emit();
         }
     }
     ngAfterViewInit() {
@@ -7947,15 +7676,16 @@ class DateInputComponent {
      */
     writeValue(value) {
         this.verifyValue(value);
-        this.kendoDate = this.getKendoDate(value);
         this.value = cloneDate(value);
-        this.updateElementValue(this.isActive);
+        this.kendoDate?.setOptions(this.options, true);
+        this.kendoDateObject?.setValue(this.value);
+        this.kendoDate?.refreshElementValue();
     }
     /**
      * @hidden
      */
     triggerChange() {
-        const value = this.kendoDate.getDateObject();
+        const value = this.kendoDate.value;
         if (+value !== +this.value) {
             this.value = cloneDate(value);
             this.notify();
@@ -7998,11 +7728,7 @@ class DateInputComponent {
      * ```
      */
     focus() {
-        const input = this.inputElement;
-        if (input) {
-            input.focus();
-            this.selectDateSegment(this.currentFormat[0]);
-        }
+        this.kendoDate && this.kendoDate.focus();
     }
     /**
      * Blurs the DateInput component.
@@ -8018,220 +7744,53 @@ class DateInputComponent {
      */
     handleButtonClick(offset) {
         this.arrowDirection = Arrow.None;
-        this.modifyDateSegmentValue(offset);
-    }
-    /**
-     * @hidden
-     */
-    modifyDateSegmentValue(offset) {
-        const caret = this.caret();
-        const symbol = this.currentFormat[caret[0]];
-        let step = (this.steps || {})[this.symbolsMap[symbol]] || 1;
-        if (symbol === "S" && !this.steps.millisecond) {
-            const msDigits = millisecondDigitsInFormat(this.inputFormat);
-            step = millisecondStepFor(msDigits);
-        }
-        this.kendoDate.modifyPart(symbol, offset * step);
-        this.putDateInRange();
-        this.updateElementValue(this.isActive);
-        this.triggerChange();
-        this.selectDateSegment(symbol);
-        this.updateIncompleteValidationStatus();
-    }
-    /**
-     * @hidden
-     */
-    switchDateSegment(offset) {
-        const caret = this.caret();
-        if (this.kendoDate.resetLeadingZero()) {
-            this.updateElementValue(this.isActive);
-        }
-        if (caret[0] < caret[1] && this.currentFormat[caret[0]] !== this.currentFormat[caret[1] - 1]) {
-            this.selectNearestSegment(offset > 0 ? caret[0] : caret[1] - 1);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        const previousFormatSymbol = this.currentFormat[caret[0]];
-        let a = caret[0] + offset;
-        while (a > 0 && a < this.currentFormat.length) {
-            if (this.currentFormat[a] !== previousFormatSymbol &&
-                this.currentFormat[a] !== "_") {
-                break;
+        this.kendoDate.focus();
+        this.kendoDate.modifyDateSegmentValue(offset);
+    }
+    initKendoDate() {
+        const kendoDate = new DateInput(this.dateInput.nativeElement, {
+            ...this.options,
+            events: {
+                valueChange: this.onWidgetValueChange.bind(this),
+                inputEnd: this.onWidgetInputEnd.bind(this),
+                focusEnd: this.onWidgetFocus.bind(this),
+                blurEnd: this.onWidgetBlur.bind(this),
+                keydown: this.onWidgetKeyDown.bind(this),
             }
-            a += offset;
-        }
-        if (this.currentFormat[a] === "_") {
-            //there is not known symbol found
-            return false;
-        }
-        let b = a;
-        while (b >= 0 && b < this.currentFormat.length) {
-            if (this.currentFormat[b] !== this.currentFormat[a]) {
-                break;
-            }
-            b += offset;
-        }
-        if (a > b && (b + 1 !== caret[0] || a + 1 !== caret[1])) {
-            this.caret(b + 1, a + 1);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        else if (a < b && (a !== caret[0] || b !== caret[1])) {
-            this.caret(a, b);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    selectDateSegment(symbol) {
-        let begin = -1;
-        let end = 0;
-        for (let i = 0; i < this.currentFormat.length; i++) {
-            if (this.currentFormat[i] === symbol) {
-                end = i + 1;
-                if (begin === -1) {
-                    begin = i;
-                }
-            }
-        }
-        if (begin < 0) {
-            begin = 0;
-        }
-        this.caret(0, 0);
-        this.caret(begin, end);
+        });
+        return kendoDate;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.hasMousedown = false;
-        if (this.isActive) {
-            const selectionPresent = this.inputElement.selectionStart !== this.inputElement.selectionEnd;
-            const placeholderToggled = isPresent(this.placeholder) && !this.kendoDate.hasValue() && !this.focusedPriorToMousedown;
-            // focus first segment if the user hasn't selected something during mousedown and if the placeholder was just toggled
-            const selectFirstSegment = !selectionPresent && placeholderToggled;
-            const index = selectFirstSegment ? 0 : this.caret()[0];
-            this.selectNearestSegment(index);
-        }
+    onWidgetValueChange() {
+        this.triggerChange();
     }
-    /**
-     * @hidden
-     */
-    handleDragAndDrop(args) {
-        args.preventDefault();
+    onWidgetKeyDown() {
+        this.kendoDateObject = this.kendoDate.dateObject;
     }
-    /**
-     * @hidden
-     */
-    handleMousedown() {
-        this.hasMousedown = true;
-        this.focusedPriorToMousedown = this.isActive;
+    onWidgetInputEnd() {
+        this.updateIncompleteValidationStatus();
     }
-    /**
-     * @hidden
-     */
-    handleFocus(args) {
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+    onWidgetFocus({ event: FocuseEvent }) {
         this.isActive = true;
-        this.updateElementValue();
-        if (!this.hasMousedown) {
-            this.caret(0, this.inputValue.length);
-        }
-        this.hasMousedown = false;
         if (hasObservers(this.onFocus)) {
             this.ngZone.run(() => {
-                this.emitFocus(args);
+                this.emitFocus(event);
             });
         }
         else {
-            this.emitFocus(args);
+            this.emitFocus(event);
         }
     }
-    /**
-     * @hidden
-     */
-    handleBlur(args) {
+    onWidgetBlur({ event: FocuseEvent }) {
         this.isActive = false;
-        this.resetSegmentValue = true;
-        this.kendoDate.resetLeadingZero();
-        this.updateElementValue();
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.ngControl)) {
             this.ngZone.run(() => {
                 this.onControlTouched();
-                this.emitBlur(args);
+                this.emitBlur(event);
                 this.cdr.markForCheck();
             });
         }
         else {
-            this.emitBlur(args);
-        }
-    }
-    getKendoDate(value) {
-        const { leadingZero } = (this.kendoDate || {}) || null;
-        const kendoDate = new KendoDate(this.intl, this.formatPlaceholder, this.inputFormat, value, this.twoDigitYearMax);
-        kendoDate.setLeadingZero(this.isActive ? leadingZero : null);
-        return kendoDate;
-    }
-    dateSymbolMap() {
-        const reducer = (map, part) => {
-            map[part.pattern[0]] = part.type;
-            return map;
-        };
-        return this.intl.splitDateFormat(this.inputFormat).reduce(reducer, {});
-    }
-    updateElementValue(isActive) {
-        const start = this.caret()[0]; //XXX: get caret position before input is updated
-        const format = this.isActive ? this.inputFormat : this.displayFormat;
-        const texts = this.kendoDate.getTextAndFormat(format);
-        const showPlaceholder = !this.isActive && isPresent(this.placeholder) && !this.kendoDate.hasValue();
-        const input = this.inputElement;
-        this.currentFormat = texts[1];
-        this.currentValue = !showPlaceholder ? texts[0] : '';
-        this.renderer.setProperty(input, "value", this.currentValue);
-        if (input.placeholder !== this.placeholder) {
-            this.renderer.setProperty(input, "placeholder", this.placeholder);
-        }
-        if (isActive) {
-            this.selectNearestSegment(start);
-        }
-    }
-    caret(start, end = start) {
-        const isPosition = start !== undefined;
-        let returnValue = [start, start];
-        const element = this.inputElement;
-        if (isPosition && (this.disabled || this.readonly)) {
-            return undefined;
-        }
-        try {
-            if (element.selectionStart !== undefined) {
-                if (isPosition) {
-                    if (isDocumentAvailable() && document.activeElement !== element) {
-                        element.focus();
-                    }
-                    element.setSelectionRange(start, end);
-                }
-                returnValue = [element.selectionStart, element.selectionEnd];
-            }
-        }
-        catch (e) {
-            returnValue = [];
-        }
-        return returnValue;
-    }
-    selectNearestSegment(index) {
-        // Finds the nearest (in both directions) known part.
-        for (let i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
-            if (i < this.currentFormat.length && this.currentFormat[i] !== "_") {
-                this.selectDateSegment(this.currentFormat[i]);
-                return;
-            }
-            if (j >= 0 && this.currentFormat[j] !== "_") {
-                this.selectDateSegment(this.currentFormat[j]);
-                return;
-            }
+            this.emitBlur(event);
         }
     }
     verifyRange() {
@@ -8250,135 +7809,9 @@ class DateInputComponent {
             throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK$3} for possible resolution.`);
         }
     }
-    putDateInRange() {
-        const currentDate = this.kendoDate.getDateObject();
-        const candidate = dateInRange(currentDate, this.min, this.max);
-        if (this.autoCorrect && !isEqual(currentDate, candidate)) {
-            this.kendoDate = this.getKendoDate(candidate);
-        }
-    }
-    updateFormatSections() {
-        this.formatSections = this.intl.splitDateFormat(this.inputFormat)
-            .reduce(({ date, time }, p) => {
-            return {
-                date: date || DATE_PART_REGEXP.test(p.type),
-                time: time || TIME_PART_REGEXP.test(p.type)
-            };
-        }, { date: false, time: false });
-    }
     intlChange() {
+        this.kendoDate.setOptions(this.options, true);
         this.updateFormatSections();
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue(this.isActive);
-    }
-    updateOnPaste() {
-        let value = this.intl.parseDate(this.inputValue, this.inputFormat) || this.value;
-        if (isPresent(value) && this.kendoDate.shouldNormalizeCentury()) {
-            value = this.kendoDate.normalizeCentury(value);
-        }
-        const notify = +value !== +this.value;
-        this.writeValue(value);
-        if (notify) {
-            this.notify();
-        }
-    }
-    bindEvents() {
-        const element = this.wrapper.nativeElement;
-        const mousewheelHandler = this.handleMouseWheel.bind(this);
-        this.domEvents.push(this.renderer.listen(element, 'DOMMouseScroll', mousewheelHandler), this.renderer.listen(element, 'mousewheel', mousewheelHandler), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'paste', this.handlePaste.bind(this)), this.renderer.listen(element, 'input', this.handleInput.bind(this)));
-    }
-    handleMouseWheel(event) {
-        if (this.disabled || this.readonly || !this.isActive) {
-            return;
-        }
-        event = window.event || event;
-        if (event.shiftKey) {
-            this.switchDateSegment((event.wheelDelta || -event.detail) > 0 ? -1 : 1);
-        }
-        else {
-            this.modifyDateSegmentValue((event.wheelDelta || -event.detail) > 0 ? 1 : -1);
-        }
-        event.returnValue = false;
-        if (event.preventDefault) {
-            event.preventDefault();
-        }
-        if (event.stopPropagation) {
-            event.stopPropagation();
-        }
-    }
-    handlePaste() {
-        this.paste = true;
-    }
-    handleKeydown(event) {
-        if (this.disabled || this.readonly || event.altKey || event.ctrlKey || event.metaKey) {
-            return;
-        }
-        if (event.keyCode === Keys$1.Backspace) {
-            this.backspace = true;
-            return;
-        }
-        switch (event.keyCode) {
-            case Keys$1.ArrowDown:
-                this.modifyDateSegmentValue(-1);
-                break;
-            case Keys$1.ArrowUp:
-                this.modifyDateSegmentValue(1);
-                break;
-            case Keys$1.ArrowRight:
-                this.switchDateSegment(1);
-                break;
-            case Keys$1.ArrowLeft:
-                this.switchDateSegment(-1);
-                break;
-            case Keys$1.Home:
-                this.selectNearestSegment(0);
-                break;
-            case Keys$1.End:
-                this.selectNearestSegment(this.inputValue.length);
-                break;
-            default:
-                return; //skip the preventDefault if we didn't handled the keyCode
-        }
-        event.preventDefault();
-    }
-    handleInput() {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (this.paste) {
-            this.updateOnPaste();
-            this.paste = false;
-            return;
-        }
-        const diff = approximateStringMatching(this.currentValue, this.currentFormat, this.inputValue, this.caret()[0]);
-        const navigationOnly = (diff.length === 1 && diff[0][1] === "_");
-        let switchPart = false;
-        if (!navigationOnly) {
-            let parsedPart;
-            for (let i = 0; i < diff.length; i++) {
-                parsedPart = this.kendoDate.parsePart(diff[i][0], diff[i][1], this.resetSegmentValue);
-                switchPart = parsedPart.switchToNext;
-            }
-            const candidate = this.kendoDate.getDateObject();
-            if (this.value && candidate && !this.formatSections['date']) {
-                this.kendoDate = this.getKendoDate(setTime(this.value, candidate));
-            }
-        }
-        this.resetSegmentValue = false;
-        this.putDateInRange();
-        this.updateElementValue(this.isActive);
-        this.triggerChange();
-        this.updateIncompleteValidationStatus();
-        if (diff.length && diff[0][0] !== "_") {
-            this.selectDateSegment(diff[0][0]);
-        }
-        if (switchPart || navigationOnly) {
-            this.switchDateSegment(1);
-        }
-        if (this.backspace) {
-            this.switchDateSegment(-1);
-        }
-        this.backspace = false;
     }
     emitFocus(args) {
         this.onFocus.emit();
@@ -8392,20 +7825,6 @@ class DateInputComponent {
             this.pickerService.onBlur.emit(args);
         }
     }
-    updateIncompleteValidationStatus() {
-        const previousValue = this.isDateIncomplete;
-        this.isDateIncomplete = this.kendoDate.hasValue() && this.value === null;
-        if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) {
-            return;
-        }
-        if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
-            this.cdr.markForCheck();
-            this.ngZone.run(() => this.onValidatorChange());
-        }
-        else if (isPresent(this.pickerService)) {
-            this.pickerService.dateCompletenessChange.emit();
-        }
-    }
     setSpinnerFill(spinner, fill, oldFill) {
         if (oldFill !== 'none') {
             this.renderer.removeClass(spinner, `k-button-${oldFill}`);
@@ -8431,7 +7850,7 @@ class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1$1.LocalizationService }, { token: PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -8464,13 +7883,8 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
-            click: handleClick,
-            focus: handleFocus,
-            mousedown: handleMousedown,
-            touchstart: handleMousedown,
             dragstart: handleDragAndDrop,
-            drop: handleDragAndDrop,
-            blur: handleBlur
+            drop: handleDragAndDrop
         }"
         [scope]="this"
         />
@@ -8553,13 +7967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
-            click: handleClick,
-            focus: handleFocus,
-            mousedown: handleMousedown,
-            touchstart: handleMousedown,
             dragstart: handleDragAndDrop,
-            drop: handleDragAndDrop,
-            blur: handleBlur
+            drop: handleDragAndDrop
         }"
         [scope]="this"
         />
@@ -8637,12 +8046,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rangeValidation: [{
                 type: Input
-            }], autoCorrect: [{
+            }], autoCorrectParts: [{
+                type: Input
+            }], autoSwitchParts: [{
+                type: Input
+            }], autoSwitchKeys: [{
+                type: Input
+            }], allowCaretMode: [{
+                type: Input
+            }], autoFill: [{
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
             }], twoDigitYearMax: [{
                 type: Input
+            }], enableMouseWheel: [{
+                type: Input
             }], value: [{
                 type: Input
             }], spinners: [{
@@ -8914,6 +8333,43 @@ class DatePickerComponent {
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
         this.incompleteDateValidation = false;
+        /**
+         * @hidden
+         *
+         * Determines whether to auto correct invalid segments automatically.
+         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         *
+         * @default true
+         */
+        this.autoCorrectParts = true;
+        /**
+         * Determines whether to automatically move to the next segment after the user completes the current one.
+         *
+         * @default true
+         */
+        this.autoSwitchParts = true;
+        /**
+         * A string array representing custom keys, which will move the focus to the next date format segment.
+         */
+        this.autoSwitchKeys = [];
+        /**
+         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+         *
+         * @default true
+         */
+        this.enableMouseWheel = true;
+        /**
+         * Determines if the users should see a blinking caret inside the Date Input when possible.
+         *
+         * @default false
+         */
+        this.allowCaretMode = false;
+        /**
+         * When enabled, the DatePicker will autofill the rest of the date to the current date when the component loses focus.
+         *
+         * @default false
+         */
+        this.autoFill = false;
         /**
          * Specifies the focused date of the Calendar component
          * ([see example]({% slug calendar_type_datepicker %}#toc-focused-dates)).
@@ -9811,7 +9267,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -9859,6 +9315,12 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
+            [autoFill]="autoFill"
             fillMode="none"
             rounded="none"
             size="none"
@@ -9972,7 +9434,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -10028,6 +9490,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
+            [autoFill]="autoFill"
             fillMode="none"
             rounded="none"
             size="none"
@@ -10236,6 +9704,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
+            }], autoCorrectParts: [{
+                type: Input
+            }], autoSwitchParts: [{
+                type: Input
+            }], autoSwitchKeys: [{
+                type: Input
+            }], enableMouseWheel: [{
+                type: Input
+            }], allowCaretMode: [{
+                type: Input
+            }], autoFill: [{
+                type: Input
             }], focusedDate: [{
                 type: Input
             }], value: [{
@@ -12221,6 +11701,37 @@ class TimePickerComponent {
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
         this.incompleteDateValidation = false;
+        /**
+         * @hidden
+         *
+         * Determines whether to auto correct invalid segments automatically.
+         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         *
+         * @default true
+         */
+        this.autoCorrectParts = true;
+        /**
+         * Determines whether to automatically move to the next segment after the user completes the current one.
+         *
+         * @default true
+         */
+        this.autoSwitchParts = true;
+        /**
+         * A string array representing custom keys, which will move the focus to the next date format segment.
+         */
+        this.autoSwitchKeys = [];
+        /**
+         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+         *
+         * @default true
+         */
+        this.enableMouseWheel = true;
+        /**
+         * Determines if the users should see a blinking caret inside the Date Input when possible.
+         *
+         * @default false
+         */
+        this.allowCaretMode = false;
         /**
          * Determines whether to display the **Cancel** button in the popup.
          */
@@ -13070,7 +12581,7 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimePickerComponent, selector: "kendo-timepicker", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", cancelButton: "cancelButton", nowButton: "nowButton", steps: "steps", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", adaptiveMode: "adaptiveMode", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-timepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => TimePickerComponent) },
@@ -13136,6 +12647,11 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
@@ -13265,7 +12781,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-timeselector-messages>
             </kendo-timeselector>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13339,6 +12855,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [min]="normalizeTime(min)"
             [max]="normalizeTime(max)"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
             [fillMode]="fillMode"
             [rounded]="rounded"
             [size]="size"
@@ -13507,6 +13028,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
+            }], autoCorrectParts: [{
+                type: Input
+            }], autoSwitchParts: [{
+                type: Input
+            }], autoSwitchKeys: [{
+                type: Input
+            }], enableMouseWheel: [{
+                type: Input
+            }], allowCaretMode: [{
+                type: Input
             }], cancelButton: [{
                 type: Input
             }], nowButton: [{
@@ -13719,7 +13250,14 @@ class DateTimePickerComponent {
          * Configures the incremental steps of the DateInput and the popup component of the TimePicker
          * ([see example]({% slug incrementalsteps_datetimepicker %})).
          */
-        this.steps = {};
+        this.steps = {
+            second: 1,
+            minute: 1,
+            hour: 1,
+            day: 1,
+            month: 1,
+            year: 1
+        };
         /**
          * Specifies the Calendar type.
          *
@@ -13758,6 +13296,43 @@ class DateTimePickerComponent {
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
         this.incompleteDateValidation = false;
+        /**
+         * @hidden
+         *
+         * Determines whether to auto correct invalid segments automatically.
+         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         *
+         * @default true
+         */
+        this.autoCorrectParts = true;
+        /**
+         * Determines whether to automatically move to the next segment after the user completes the current one.
+         *
+         * @default true
+         */
+        this.autoSwitchParts = true;
+        /**
+         * A string array representing custom keys, which will move the focus to the next date format segment.
+         */
+        this.autoSwitchKeys = [];
+        /**
+         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+         *
+         * @default true
+         */
+        this.enableMouseWheel = true;
+        /**
+         * Determines if the users should see a blinking caret inside the Date Input when possible.
+         *
+         * @default false
+         */
+        this.allowCaretMode = false;
+        /**
+         * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
+         *
+         * @default false
+         */
+        this.autoFill = false;
         /**
          * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
          */
@@ -14810,7 +14385,7 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: { focusableId: "focusableId", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", tabindex: "tabindex", disabledDates: "disabledDates", popupSettings: "popupSettings", title: "title", subtitle: "subtitle", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", cancelButton: "cancelButton", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", focusedDate: "focusedDate", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", weekNumber: "weekNumber", min: "min", max: "max", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", adaptiveMode: "adaptiveMode", defaultTab: "defaultTab", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-datetimepicker": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         PickerService,
         LocalizationService,
         DisabledDatesService,
@@ -14891,6 +14466,12 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
+            [autoFill]="autoFill"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
@@ -15170,7 +14751,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "isAdaptiveEnabled", "isDateTimePicker", "steps", "value"], outputs: ["valueChange", "valueReject", "tabOutLastPart"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -15259,6 +14840,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [min]="min"
             [max]="max"
             [incompleteDateValidation]="incompleteDateValidation"
+            [autoCorrectParts]="autoCorrectParts"
+            [autoSwitchParts]="autoSwitchParts"
+            [autoSwitchKeys]="autoSwitchKeys"
+            [enableMouseWheel]="enableMouseWheel"
+            [allowCaretMode]="allowCaretMode"
+            [autoFill]="autoFill"
             [formatPlaceholder]="formatPlaceholder"
             [placeholder]="placeholder"
             [disabled]="disabled"
@@ -15605,6 +15192,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
+            }], autoCorrectParts: [{
+                type: Input
+            }], autoSwitchParts: [{
+                type: Input
+            }], autoSwitchKeys: [{
+                type: Input
+            }], enableMouseWheel: [{
+                type: Input
+            }], allowCaretMode: [{
+                type: Input
+            }], autoFill: [{
+                type: Input
             }], adaptiveMode: [{
                 type: Input
             }], valueChange: [{