JSFiddle - React, Tailwind, and code Playground

by Dave Salomon

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input type="text" class="date" />

CSS

input {
  font-size: 26px;
}

JavaScript

$.fn.textboxDatePicker = function() {

        var _getCaret = function(el) {
            if (el.selectionStart) {
              return el.selectionStart;
            } else if (document.selection) {
                el.focus();

                var r = document.selection.createRange();
                if (r == null) {
                    return 0;
                }

                var re = el.createTextRange(), rc = re.duplicate();
                re.moveToBookmark(r.getBookmark());
                rc.setEndPoint('EndToStart', re);

                return rc.text.length;
            }
            return 0;
        };

        var _setCaretPosition = function(elem, caretPos) {
            if (caretPos == 2 || caretPos == 5) {
                caretPos++;
            }
            if (elem != null) {
                if (elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.move('character', caretPos);
                    range.select();
                } else {
                    if (elem.selectionStart) {
                        elem.focus();
                        elem.setSelectionRange(caretPos, caretPos);
                    }
                    else elem.focus();
                }
            }
        };

        $(this).val('dd/mm/yyyy');

        $(this).on("keydown", function(e) {
            var keyCode = e.which || e.charCode || e.keyCode;
            var key = String.fromCharCode(keyCode);

            // arrows, home, end
            if ([35, 36].indexOf(keyCode) > -1) {
                return true;
            }

            if (keyCode == 37) {
                var newCaretPos = _getCaret(this) - 1;
                if ([2, 5].indexOf(newCaretPos) > -1) {
                    _setCaretPosition(this, newCaretPos - 1);
                    return false;
                }
                return true;
            }

            if (keyCode == 39) {
                var newCaretPos = _getCaret(this) + 1;
 ...