@progress/kendo-dateinputs-common 0.1.0 → 0.2.0-dev.202301061353

package/dist/npm/dateinput/dateinput.js

@@ -0,0 +1,1013 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var _a;
+var dateobject_1 = require("../common/dateobject");
+var utils_1 = require("./utils");
+var keycode_1 = require("../common/keycode");
+var key_1 = require("../common/key");
+var utils_2 = require("../common/utils");
+var observable_1 = require("../common/observable");
+var interaction_mode_1 = require("./interaction-mode");
+var kendo_date_math_1 = require("@progress/kendo-date-math");
+var constants_1 = require("../common/constants");
+var DEFAULT_SEGMENT_STEP = 1;
+var DRAG_START = "dragStart";
+var DROP = "drop";
+var TOUCH_START = "touchstart";
+var MOUSE_DOWN = "mousedown";
+var MOUSE_UP = "mouseup";
+var CLICK = "click";
+var INPUT = "input";
+var KEY_DOWN = "keydown";
+var FOCUS = "focus";
+var BLUR = "blur";
+var PASTE = "paste";
+var MOUSE_SCROLL = "DOMMouseScroll";
+var MOUSE_WHEEL = "mousewheel";
+var VALUE_CHANGE = "valueChange";
+var INPUT_END = "inputEnd";
+var BLUR_END = "blurEnd";
+var FOCUS_END = "focusEnd";
+var CHANGE = "change";
+var defaultDateInputOptions = {
+    format: "d",
+    allowNulls: false,
+    placeholder: null,
+    cycleTime: true,
+    locale: null,
+    steps: {
+        millisecond: DEFAULT_SEGMENT_STEP,
+        second: DEFAULT_SEGMENT_STEP,
+        minute: DEFAULT_SEGMENT_STEP,
+        hour: DEFAULT_SEGMENT_STEP,
+        day: DEFAULT_SEGMENT_STEP,
+        month: DEFAULT_SEGMENT_STEP,
+        year: DEFAULT_SEGMENT_STEP
+    },
+    formatPlaceholder: null,
+    events: (_a = {},
+        _a[VALUE_CHANGE] = null,
+        _a[INPUT] = null,
+        _a[INPUT_END] = null,
+        _a[FOCUS] = null,
+        _a[FOCUS_END] = null,
+        _a[BLUR] = null,
+        _a[BLUR_END] = null,
+        _a[KEY_DOWN] = null,
+        _a[MOUSE_WHEEL] = null,
+        _a[CHANGE] = null,
+        _a),
+    selectNearestSegmentOnFocus: false,
+    enableMouseWheel: false,
+    allowCaretMode: false,
+    autoSwitchParts: true,
+    autoSwitchKeys: [],
+    twoDigitYearMax: constants_1.Constants.twoDigitYearMax,
+    autoCorrectParts: true
+};
+var DateInput = /** @class */ (function (_super) {
+    tslib_1.__extends(DateInput, _super);
+    function DateInput(element, options) {
+        var _this = _super.call(this, options) || this;
+        _this.dateObject = null;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        _this.currentText = '';
+        _this.currentFormat = '';
+        _this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
+        _this.localeId = constants_1.Constants.defaultLocaleId;
+        _this.init(element, options);
+        return _this;
+    }
+    Object.defineProperty(DateInput.prototype, "value", {
+        get: function () {
+            return this.dateObject && this.dateObject.getValue();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DateInput.prototype.init = function (element, options) {
+        var dateValue = utils_2.isDate(this.options.value) ? kendo_date_math_1.cloneDate(this.options.value) : new Date(options.formattedValue);
+        if (!utils_2.isDate(dateValue)) {
+            dateValue = null;
+        }
+        this.element = element;
+        // this.element._kendoWidget = this;
+        this.options = utils_2.extend({}, defaultDateInputOptions, options);
+        this.intl = this.options.intlService;
+        this.formatPlaceholder = this.options.formatPlaceholder ? this.options.formatPlaceholder : 'formatPattern';
+        this.dateObject = this.createDateObject();
+        this.dateObject.setValue(dateValue);
+        this.setTextAndFormat();
+        this.bindEvents();
+        this.resetSegmentValue = true;
+        this.forceUpdate();
+    };
+    DateInput.prototype.destroy = function () {
+        this.unbindEvents();
+        this.dateObject = null;
+        _super.prototype.destroy.call(this);
+    };
+    DateInput.prototype.bindEvents = function () {
+        this.onElementDragStart = this.onElementDragStart.bind(this);
+        this.element.addEventListener(DRAG_START, this.onElementDragStart);
+        this.onElementDrop = this.onElementDrop.bind(this);
+        this.element.addEventListener(DROP, this.onElementDrop);
+        this.onElementClick = this.onElementClick.bind(this);
+        this.element.addEventListener(CLICK, this.onElementClick);
+        this.onElementMouseDown = this.onElementMouseDown.bind(this);
+        this.element.addEventListener(MOUSE_DOWN, this.onElementMouseDown);
+        this.element.addEventListener(TOUCH_START, this.onElementMouseDown);
+        this.onElementMouseUp = this.onElementMouseUp.bind(this);
+        this.element.addEventListener(MOUSE_UP, this.onElementMouseUp);
+        this.onElementInput = this.onElementInput.bind(this);
+        this.element.addEventListener(INPUT, this.onElementInput);
+        this.onElementKeyDown = this.onElementKeyDown.bind(this);
+        this.element.addEventListener(KEY_DOWN, this.onElementKeyDown);
+        this.onElementFocus = this.onElementFocus.bind(this);
+        this.element.addEventListener(FOCUS, this.onElementFocus);
+        this.onElementBlur = this.onElementBlur.bind(this);
+        this.element.addEventListener(BLUR, this.onElementBlur);
+        this.onElementChange = this.onElementChange.bind(this);
+        this.element.addEventListener(CHANGE, this.onElementChange);
+        this.onElementPaste = this.onElementPaste.bind(this);
+        this.element.addEventListener(PASTE, this.onElementPaste);
+        this.onElementMouseWheel = this.onElementMouseWheel.bind(this);
+        this.element.addEventListener(MOUSE_SCROLL, this.onElementMouseWheel);
+        this.element.addEventListener(MOUSE_WHEEL, this.onElementMouseWheel);
+    };
+    DateInput.prototype.unbindEvents = function () {
+        this.element.removeEventListener(DRAG_START, this.onElementDragStart);
+        this.element.removeEventListener(DROP, this.onElementDrop);
+        this.element.removeEventListener(TOUCH_START, this.onElementMouseDown);
+        this.element.removeEventListener(MOUSE_DOWN, this.onElementMouseDown);
+        this.element.removeEventListener(MOUSE_UP, this.onElementMouseUp);
+        this.element.removeEventListener(CLICK, this.onElementClick);
+        this.element.removeEventListener(INPUT, this.onElementInput);
+        this.element.removeEventListener(KEY_DOWN, this.onElementKeyDown);
+        this.element.removeEventListener(FOCUS, this.onElementFocus);
+        this.element.removeEventListener(BLUR, this.onElementBlur);
+        this.element.removeEventListener(CHANGE, this.onElementChange);
+        this.element.removeEventListener(PASTE, this.onElementPaste);
+        this.element.removeEventListener(MOUSE_SCROLL, this.onElementMouseWheel);
+        this.element.removeEventListener(MOUSE_WHEEL, this.onElementMouseWheel);
+    };
+    DateInput.prototype.setOptions = function (options, refresh) {
+        if (refresh === void 0) { refresh = false; }
+        this.options = utils_2.extend(this.options, options);
+        if (refresh) {
+            this.destroy();
+            this.init(this.element, options);
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.resetLocale = function () {
+        this.unbindEvents();
+        this.init(this.element, this.options);
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.isInCaretMode = function () {
+        return this.interactionMode === interaction_mode_1.DateInputInteractionMode.Caret;
+    };
+    DateInput.prototype.focus = function () {
+        this.element.focus();
+        if (this.options.selectNearestSegmentOnFocus) {
+            this.selectNearestSegment(0);
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementDragStart = function (e) {
+        e.preventDefault();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementDrop = function (e) {
+        e.preventDefault();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementMouseDown = function () {
+        this.mouseDownStarted = true;
+        this.focusedPriorToMouseDown = this.isActive;
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementMouseUp = function (e) {
+        this.mouseDownStarted = false;
+        e.preventDefault();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementClick = function (e) {
+        this.mouseDownStarted = false;
+        var selection = this.selection;
+        if (this.isInCaretMode()) {
+            // explicitly refresh the input element value
+            // caret mode can change the number of symbols in the element
+            // thus clicking on a segment can result in incorrect selection
+            this.forceUpdate();
+        }
+        if (e.detail === 3) {
+            // when 3 clicks occur, leave the native event to handle the change
+            // this results in selecting the whole element value
+        }
+        else {
+            if (this.isActive && this.options.selectNearestSegmentOnFocus) {
+                var selectionPresent = this.element.selectionStart !== this.element.selectionEnd;
+                var placeholderToggled = utils_2.isPresent(this.options.placeholder) &&
+                    !this.dateObject.hasValue() &&
+                    !this.focusedPriorToMouseDown;
+                // focus first segment if the user hasn't selected something during mousedown and if the placeholder was just toggled
+                var selectFirstSegment = !selectionPresent && placeholderToggled;
+                var index = selectFirstSegment ? 0 : this.caret()[0];
+                this.selectNearestSegment(index);
+            }
+            else {
+                this.setSelection(this.selectionByIndex(selection.start));
+            }
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementInput = function (e) {
+        this.triggerInput({ event: e });
+        var keyDownEvent = this.keyDownEvent || {};
+        var isBackspaceKey = keyDownEvent.keyCode === keycode_1.KeyCode.BACKSPACE || keyDownEvent.key === key_1.Key.BACKSPACE;
+        var isDeleteKey = keyDownEvent.keyCode === keycode_1.KeyCode.DELETE || keyDownEvent.key === key_1.Key.DELETE;
+        if (!this.element || !this.dateObject) {
+            return;
+        }
+        if (this.isPasteInProgress) {
+            if (this.options.allowCaretMode) {
+                // pasting should leave the input with caret
+                // thus allow direct input instead of selection mode
+                this.resetSegmentValue = false;
+            }
+            this.updateOnPaste(e);
+            this.isPasteInProgress = false;
+            return;
+        }
+        var originalInteractionMode = this.interactionMode;
+        if (this.options.allowCaretMode &&
+            originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret &&
+            !isDeleteKey && !isBackspaceKey) {
+            this.resetSegmentValue = true;
+        }
+        if (this.options.allowCaretMode) {
+            this.interactionMode = interaction_mode_1.DateInputInteractionMode.Caret;
+        }
+        else {
+            this.interactionMode = interaction_mode_1.DateInputInteractionMode.Selection;
+        }
+        var hasCaret = this.isInCaretMode();
+        if (hasCaret && this.keyDownEvent.key === key_1.Key.SPACE) {
+            // do not allow custom "holes" in the date segments
+            this.setPreviousInputEventState(this.keyDownEvent);
+            return;
+        }
+        var oldDateObjectValue = this.dateObject && this.dateObject.getValue();
+        var _a = this.dateObject.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
+        this.currentFormat = currentFormat;
+        var text = hasCaret && (isBackspaceKey || isDeleteKey) ? this.previousElementValue : currentText;
+        var diff = utils_1.approximateStringMatching({
+            oldText: text,
+            newText: this.element.value,
+            formatPattern: this.currentFormat,
+            selectionStart: this.selection.start,
+            isInCaretMode: hasCaret,
+            keyEvent: this.keyDownEvent
+        });
+        if (hasCaret && (!diff || diff.length === 0)) {
+            this.setPreviousInputEventState(this.keyDownEvent);
+            return;
+        }
+        else if (hasCaret && diff.length === 1) {
+            if (!diff[0] || !diff[0][0]) {
+                this.setPreviousInputEventState(this.keyDownEvent);
+                return;
+            }
+            else if (hasCaret && diff[0] &&
+                (diff[0][0] === constants_1.Constants.formatSeparator || diff[0][1] === constants_1.Constants.formatSeparator)) {
+                this.setPreviousInputEventState(this.keyDownEvent);
+                return;
+            }
+        }
+        var navigationOnly = (diff.length === 1 && diff[0][1] === constants_1.Constants.formatSeparator);
+        var parsePartsResults = [];
+        var switchPart = false;
+        if (!navigationOnly) {
+            for (var i = 0; i < diff.length; i++) {
+                var parsePartResult = this.dateObject.parsePart({
+                    symbol: diff[i][0],
+                    currentChar: diff[i][1],
+                    resetSegmentValue: this.resetSegmentValue,
+                    cycleSegmentValue: !this.isInCaretMode(),
+                    rawTextValue: this.element.value,
+                    isDeleting: isBackspaceKey || isDeleteKey
+                });
+                parsePartsResults.push(parsePartResult);
+                switchPart = parsePartResult.switchToNext;
+            }
+        }
+        if (!this.options.autoSwitchParts) {
+            switchPart = false;
+        }
+        this.resetSegmentValue = false;
+        var lastParseResult = parsePartsResults[parsePartsResults.length - 1];
+        var lastParseResultHasNoValue = lastParseResult && !lastParseResult.value;
+        var parsingFailedOnDelete = (hasCaret && (isBackspaceKey || isDeleteKey) && lastParseResultHasNoValue);
+        var resetPart = lastParseResult ? lastParseResult.resetPart : false;
+        var hasDateValueChanged = !kendo_date_math_1.isEqual(oldDateObjectValue, this.dateObject.value);
+        var symbolForSelection;
+        var currentSelection = this.selection;
+        if (!hasCaret || parsingFailedOnDelete || resetPart) {
+            if (resetPart) {
+                symbolForSelection = this.currentFormat[currentSelection.start];
+            }
+            this.forceUpdate();
+        }
+        if (diff.length && diff[0][0] !== constants_1.Constants.formatSeparator) {
+            if (!hasCaret || parsingFailedOnDelete || resetPart) {
+                if (symbolForSelection) {
+                    this.setSelection(this.selectionBySymbol(symbolForSelection));
+                }
+                else {
+                    if (!this.options.autoSwitchParts && diff[0][1] === constants_1.Constants.formatSeparator) {
+                        // do not change the selection when a separator is pressed
+                        // this should happen only if autoSwitchKeys contains the separator explicitly
+                    }
+                    else {
+                        this.setSelection(this.selectionBySymbol(diff[0][0]));
+                    }
+                }
+            }
+        }
+        if (!switchPart && hasCaret && !isBackspaceKey && !isDeleteKey && !resetPart && lastParseResultHasNoValue) {
+            if (hasDateValueChanged) {
+                if (this.currentFormat.length === this.elementValue.length) {
+                    // if a full date is entered, do not reset it
+                }
+                else {
+                    // the input is not complete, not parsable or not updatable
+                    if (hasCaret && originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret && hasDateValueChanged) {
+                    }
+                    else if (hasCaret && originalInteractionMode !== interaction_mode_1.DateInputInteractionMode.Caret) {
+                        symbolForSelection = this.currentFormat[currentSelection.start];
+                        this.forceUpdate();
+                        this.setSelection(this.selectionBySymbol(symbolForSelection));
+                    }
+                    else {
+                        this.setPreviousInputEventState(this.keyDownEvent);
+                    }
+                }
+            }
+        }
+        else if (this.options.autoSwitchParts && (switchPart || navigationOnly)) {
+            if (!hasCaret) {
+                this.switchDateSegment(1);
+            }
+        }
+        this.tryTriggerValueChange({
+            oldValue: oldDateObjectValue,
+            event: e
+        });
+        this.triggerInputEnd({ event: e });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementFocus = function (e) {
+        if (this.triggerFocus({ event: e })) {
+            return;
+        }
+        this.isActive = true;
+        this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
+        this.refreshElementValue();
+        if (!this.mouseDownStarted) {
+            this.caret(0, this.elementValue.length);
+        }
+        this.mouseDownStarted = false;
+        this.triggerFocusEnd({ event: e });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementBlur = function (e) {
+        this.resetSegmentValue = true;
+        this.isActive = false;
+        if (this.triggerBlur({ event: e })) {
+            return;
+        }
+        this.interactionMode = interaction_mode_1.DateInputInteractionMode.None;
+        this.refreshElementValue();
+        this.triggerBlurEnd({ event: e });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementChange = function (e) {
+        this.triggerChange({ event: e });
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementKeyDown = function (e) {
+        if (this.triggerKeyDown({ event: e })) {
+            return;
+        }
+        this.keyDownEvent = e;
+        this.previousElementValue = this.element.value;
+        var autoSwitchKeys = (this.options.autoSwitchKeys || [])
+            .map(function (x) { return x.toString().toLowerCase().trim(); });
+        if (autoSwitchKeys.indexOf(e.keyCode.toString()) >= 0 ||
+            autoSwitchKeys.indexOf(e.keyCode) >= 0 ||
+            autoSwitchKeys.indexOf(e.key.toLowerCase().trim()) >= 0) {
+            var isTabKey = autoSwitchKeys.indexOf(key_1.Key.TAB.toLowerCase().trim()) >= 0 ||
+                autoSwitchKeys.indexOf(keycode_1.KeyCode.TAB) >= 0 ||
+                autoSwitchKeys.indexOf(keycode_1.KeyCode.TAB.toString()) >= 0;
+            if (isTabKey) {
+                var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
+                if (e.shiftKey && isTabKey) {
+                    this.switchDateSegment(-1);
+                }
+                else {
+                    this.switchDateSegment(1);
+                }
+                if (selectionStart !== this.selection.start || selectionEnd !== this.selection.end) {
+                    // when the selection changes, prevent the default Tab behavior
+                    e.preventDefault();
+                    return;
+                }
+            }
+            else {
+                // do not allow the "input" event to be triggered
+                e.preventDefault();
+                this.switchDateSegment(1);
+                return;
+            }
+        }
+        var symbol = this.currentFormat[this.selection.start];
+        var step = this.getStepFromSymbol(symbol);
+        var shouldPreventDefault = false;
+        if (e.altKey || e.ctrlKey || e.metaKey || e.keyCode === keycode_1.KeyCode.TAB) {
+            return;
+        }
+        switch (e.keyCode) {
+            case keycode_1.KeyCode.ARROW_LEFT:
+                this.switchDateSegment(-1);
+                shouldPreventDefault = true;
+                break;
+            case keycode_1.KeyCode.ARROW_UP:
+                this.modifyDateSegmentValue(step, symbol, event);
+                shouldPreventDefault = true;
+                break;
+            case keycode_1.KeyCode.ARROW_RIGHT:
+                this.switchDateSegment(1);
+                shouldPreventDefault = true;
+                break;
+            case keycode_1.KeyCode.ARROW_DOWN:
+                this.modifyDateSegmentValue(-step, symbol, event);
+                shouldPreventDefault = true;
+                break;
+            case keycode_1.KeyCode.ENTER:
+                // todo: handle "change" event
+                break;
+            case keycode_1.KeyCode.DELETE:
+            case keycode_1.KeyCode.BACKSPACE:
+                if (this.options.allowNulls) {
+                    var oldValue = this.dateObject.value;
+                    this.dateObject.setValue(null);
+                    this.forceUpdate();
+                    this.tryTriggerValueChange({
+                        oldValue: oldValue,
+                        event: e
+                    });
+                }
+                shouldPreventDefault = true;
+                if (e.keyCode === keycode_1.KeyCode.BACKSPACE &&
+                    ((this.options.autoSwitchKeys || []).indexOf(keycode_1.KeyCode.BACKSPACE) >= 0 ||
+                        (this.options.autoSwitchKeys || []).indexOf(key_1.Key.BACKSPACE) >= 0)) {
+                    this.switchDateSegment(-1);
+                }
+                return;
+            case key_1.Key.HOME:
+                this.selectNearestSegment(0);
+                break;
+            case key_1.Key.END:
+                this.selectNearestSegment(this.elementValue.length);
+                break;
+            default:
+                // allow the "input" event to handle the change
+                return;
+        }
+        if (shouldPreventDefault) {
+            e.preventDefault();
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementPaste = function () {
+        this.isPasteInProgress = true;
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.onElementMouseWheel = function (e) {
+        if (!this.options.enableMouseWheel || this.triggerMouseWheel({ event: e })) {
+            return;
+        }
+        if (!this.isActive) {
+            return;
+        }
+        var event = e;
+        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();
+        }
+    };
+    DateInput.prototype.updateOnPaste = function (e) {
+        var value = this.intl.parseDate(this.elementValue, this.inputFormat) || this.value;
+        if (utils_2.isPresent(value) && this.dateObject.shouldNormalizeCentury()) {
+            value = this.dateObject.normalizeCentury(value);
+        }
+        var oldDateObjectValue = this.dateObject && this.dateObject.getValue();
+        this.writeValue(value);
+        this.tryTriggerValueChange({
+            oldValue: oldDateObjectValue,
+            event: e
+        });
+    };
+    Object.defineProperty(DateInput.prototype, "elementValue", {
+        get: function () {
+            return (this.element || {}).value || '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInput.prototype, "inputFormat", {
+        get: function () {
+            if (!this.options.format) {
+                return constants_1.Constants.defaultDateFormat;
+            }
+            if (typeof this.options.format === 'string') {
+                return this.options.format;
+            }
+            else {
+                return this.options.format.inputFormat;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInput.prototype, "displayFormat", {
+        get: function () {
+            if (!this.options.format) {
+                return constants_1.Constants.defaultDateFormat;
+            }
+            if (typeof this.options.format === 'string') {
+                return this.options.format;
+            }
+            else {
+                return this.options.format.displayFormat;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DateInput.prototype, "selection", {
+        get: function () {
+            var returnValue = { start: 0, end: 0 };
+            if (this.element !== null && this.element.selectionStart !== undefined) {
+                returnValue = {
+                    start: this.element.selectionStart,
+                    end: this.element.selectionEnd
+                };
+            }
+            return returnValue;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DateInput.prototype.setSelection = function (selection) {
+        // this._lastSelectedSymbol = this.currentFormat[selection.start];
+        if (this.element && document.activeElement === this.element) {
+            this.element.setSelectionRange(selection.start, selection.end);
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.selectionBySymbol = function (symbol) {
+        var start = -1;
+        var end = 0;
+        for (var i = 0; i < this.currentFormat.length; i++) {
+            if (this.currentFormat[i] === symbol) {
+                end = i + 1;
+                if (start === -1) {
+                    start = i;
+                }
+            }
+        }
+        if (start < 0) {
+            start = 0;
+        }
+        return { start: start, end: end };
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.selectionByIndex = function (index) {
+        var selection = { start: index, end: index };
+        for (var i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
+            if (i < this.currentFormat.length && this.currentFormat[i] !== constants_1.Constants.formatSeparator) {
+                selection = this.selectionBySymbol(this.currentFormat[i]);
+                break;
+            }
+            if (j >= 0 && this.currentFormat[j] !== constants_1.Constants.formatSeparator) {
+                selection = this.selectionBySymbol(this.currentFormat[j]);
+                break;
+            }
+        }
+        return selection;
+    };
+    DateInput.prototype.switchDateSegment = function (offset) {
+        var selection = this.selection;
+        if (this.isInCaretMode()) {
+            var start = selection.start;
+            var closestNonSeparatorSymbol = this.currentFormat[start];
+            for (var i = start; i >= 0; i--) {
+                closestNonSeparatorSymbol = this.currentFormat[i];
+                if (closestNonSeparatorSymbol !== constants_1.Constants.formatSeparator) {
+                    start = i;
+                    break;
+                }
+            }
+            var symbol = void 0;
+            for (var i = start; i < this.currentFormat.length; i++) {
+                symbol = this.currentFormat[i];
+                if (symbol !== constants_1.Constants.formatSeparator) {
+                    break;
+                }
+            }
+            if (symbol) {
+                this.forceUpdate();
+                this.setSelection(this.selectionBySymbol(symbol));
+            }
+        }
+        var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
+        if (selectionStart < selectionEnd &&
+            this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {
+            this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));
+            this.resetSegmentValue = true;
+            return;
+        }
+        var previousFormatSymbol = this.currentFormat[selectionStart];
+        var a = selectionStart + offset;
+        while (a > 0 && a < this.currentFormat.length) {
+            if (this.currentFormat[a] !== previousFormatSymbol &&
+                this.currentFormat[a] !== constants_1.Constants.formatSeparator) {
+                break;
+            }
+            a += offset;
+        }
+        if (this.currentFormat[a] === constants_1.Constants.formatSeparator) {
+            // no known symbol is found
+            return;
+        }
+        var b = a;
+        while (b >= 0 && b < this.currentFormat.length) {
+            if (this.currentFormat[b] !== this.currentFormat[a]) {
+                break;
+            }
+            b += offset;
+        }
+        if (a > b && (b + 1 !== selectionStart || a + 1 !== selectionEnd)) {
+            this.setSelection({ start: b + 1, end: a + 1 });
+            this.resetSegmentValue = true;
+        }
+        else if (a < b && (a !== selectionStart || b !== selectionEnd)) {
+            this.setSelection({ start: a, end: b });
+            this.resetSegmentValue = true;
+        }
+    };
+    DateInput.prototype.modifyDateSegmentValue = function (offset, symbol, event) {
+        if (symbol === void 0) { symbol = ""; }
+        if (event === void 0) { event = {}; }
+        if (!this.dateObject) {
+            return;
+        }
+        var oldValue = this.value;
+        var step = DEFAULT_SEGMENT_STEP * offset;
+        var caret = this.caret();
+        symbol = symbol || this.currentFormat[caret[0]];
+        if (symbol === "S" && !this.options.steps.millisecond) {
+            var msDigits = utils_2.millisecondDigitsInFormat(this.inputFormat);
+            step = utils_2.millisecondStepFor(msDigits);
+        }
+        this.dateObject.modifyPart(symbol, step);
+        this.tryTriggerValueChange({
+            oldValue: oldValue,
+            event: event
+        });
+        this.forceUpdate();
+        this.setSelection(this.selectionBySymbol(symbol));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.tryTriggerValueChange = function (args) {
+        if (args === void 0) { args = { oldValue: null, event: {} }; }
+        if (!kendo_date_math_1.isEqual(this.value, args.oldValue)) {
+            return this.triggerValueChange(args);
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerValueChange = function (args) {
+        if (args === void 0) { args = { oldValue: null, event: {} }; }
+        return this.trigger(VALUE_CHANGE, utils_2.extend(args, {
+            value: this.value
+        }));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerInput = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(INPUT, utils_2.extend(args, {
+            value: this.value
+        }));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerInputEnd = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(INPUT_END, utils_2.extend(args, {
+            value: this.value
+        }));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerFocus = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(FOCUS, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerFocusEnd = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(FOCUS_END, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerBlur = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(BLUR, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerBlurEnd = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(BLUR_END, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerChange = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(CHANGE, utils_2.extend(args, {
+            value: this.value
+        }));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerKeyDown = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(KEY_DOWN, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.triggerMouseWheel = function (args) {
+        if (args === void 0) { args = { event: {} }; }
+        return this.trigger(MOUSE_WHEEL, utils_2.extend({}, args));
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.forceUpdate = function () {
+        this.setTextAndFormat();
+        this.refreshElementValue();
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.setTextAndFormat = function () {
+        var _a = this.dateObject.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
+        this.currentFormat = currentFormat;
+        this.currentText = currentText;
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.setElementValue = function (value) {
+        this.previousElementValue = this.element.value;
+        this.element.value = value;
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.getStepFromSymbol = function (symbol) {
+        /* eslint-disable no-fallthrough */
+        switch (symbol) {
+            case "S":
+                return Number(this.options.steps.millisecond);
+            case "s":
+                return Number(this.options.steps.second);
+            case "m":
+                return Number(this.options.steps.minute);
+            // represents hour as value from 01 through 12
+            case "h":
+            // represents hour as value from 01 through 23
+            case "H":
+                return Number(this.options.steps.hour);
+            case "M":
+                return Number(this.options.steps.month);
+            // there is no 'D' format specifier for day
+            case "d":
+            // used for formats such as "EEEE, MMMM d, yyyy",
+            // where "EEEE" stands for full name of the day e.g. Monday
+            case "E":
+                return Number(this.options.steps.day);
+            // there is no 'Y' format specifier for year
+            case "y":
+                return Number(this.options.steps.year);
+            default:
+                return DEFAULT_SEGMENT_STEP;
+        }
+        /* eslint-enable no-fallthrough */
+    };
+    DateInput.prototype.setPreviousInputEventState = function (keyDownEvent) {
+        var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
+        var selectionOffset = -1;
+        if (keyDownEvent.keyCode === keycode_1.KeyCode.BACKSPACE) {
+            selectionOffset = 1;
+        }
+        else if (keyDownEvent.keyCode === keycode_1.KeyCode.DELETE) {
+            selectionOffset = 0;
+        }
+        else if (keyDownEvent.keyCode === keycode_1.KeyCode.SPACE) {
+            selectionOffset = -1;
+        }
+        else {
+            selectionOffset = -1;
+        }
+        this.setElementValue(this.previousElementValue || '');
+        this.setSelection({ start: selectionStart + selectionOffset, end: selectionEnd + selectionOffset });
+    };
+    DateInput.prototype.writeValue = function (value) {
+        this.verifyValue(value);
+        this.dateObject = this.getDateObject(value);
+        this.refreshElementValue();
+    };
+    DateInput.prototype.verifyValue = function (value) {
+        if (value && !utils_2.isDate(value)) {
+            throw new Error("The 'value' should be a valid JavaScript Date instance.");
+        }
+    };
+    DateInput.prototype.refreshElementValue = function () {
+        var start = this.caret()[0];
+        var element = this.element;
+        var format = this.isActive ? this.inputFormat : this.displayFormat;
+        var _a = this.dateObject.getTextAndFormat(format), currentText = _a.text, currentFormat = _a.format;
+        this.currentFormat = currentFormat;
+        this.currentText = currentText;
+        var showPlaceholder = !this.isActive &&
+            utils_2.isPresent(this.options.placeholder) &&
+            !this.dateObject.hasValue();
+        if (utils_2.isPresent(this.options.placeholder)) {
+            element.placeholder = this.options.placeholder;
+        }
+        var newElementValue = !showPlaceholder ? currentText : "";
+        this.setElementValue(newElementValue);
+        if (this.isActive && !this.options.allowCaretMode && this.options.selectNearestSegmentOnFocus) {
+            this.selectNearestSegment(start);
+        }
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.caret = function (start, end) {
+        if (end === void 0) { end = start; }
+        var isPosition = start !== undefined;
+        var returnValue = [start, start];
+        var element = this.element;
+        if (isPosition && (this.options.disabled || this.options.readonly)) {
+            return undefined;
+        }
+        try {
+            if (element.selectionStart !== undefined) {
+                if (isPosition) {
+                    if (utils_2.isDocumentAvailable() && document.activeElement !== element) {
+                        element.focus();
+                    }
+                    element.setSelectionRange(start, end);
+                }
+                returnValue = [element.selectionStart, element.selectionEnd];
+            }
+        }
+        catch (e) {
+            returnValue = [];
+        }
+        return returnValue;
+    };
+    DateInput.prototype.selectNearestSegment = function (index) {
+        // Finds the nearest (in both directions) known part.
+        for (var 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;
+            }
+        }
+    };
+    DateInput.prototype.selectDateSegment = function (symbol) {
+        var begin = -1;
+        var end = 0;
+        for (var 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);
+    };
+    /**
+     * @hidden
+     */
+    DateInput.prototype.getDateObject = function (value) {
+        var leadingZero = ((this.dateObject || {}) || null).leadingZero;
+        var dateObject = this.createDateObject({
+            value: value
+        });
+        dateObject.setLeadingZero(this.isActive ? leadingZero : null);
+        return dateObject;
+    };
+    /* tslint:disable:align */
+    /**
+     * @hidden
+     */
+    DateInput.prototype.createDateObject = function (options) {
+        if (options === void 0) { options = {}; }
+        var dateObject = new dateobject_1.DateObject(utils_2.extend({
+            intlService: this.intl,
+            formatPlaceholder: this.formatPlaceholder,
+            format: this.inputFormat,
+            localeId: this.localeId,
+            cycleTime: this.options.cycleTime,
+            twoDigitYearMax: this.options.twoDigitYearMax,
+            autoCorrectParts: this.options.autoCorrectParts
+        }, options));
+        return dateObject;
+    };
+    return DateInput;
+}(observable_1.Observable));
+exports.DateInput = DateInput;