javascript - 允许用户在文本框中以 dd/mm/yyyy 格式插入日期

Question

friend 们，我有一个供用户插入日期的文本框，但我希望它只允许用户插入“dd”、“mm”和“yyyy”值，斜杠 (/) 应该已经存在并且一旦用户插入“dd”值，指针应直接移动到“mm”值的斜线后面，并且在按退格键时，它应该删除“mm”或“dd”值而不是斜线(/)。这是我尝试过的方法，但没有给我想要的结果-

function dateCheck(){

   var d_value=$("#pdate").val();
   if(d_value.length =="2" || d_value.length =="5")
   {

    $('#pdate').val($('#pdate').val()+"/");
   }

}

html代码-

Date:<input type="text" name="p_date" id="pdate"  onkeydown="dateCheck()"  placeholder="DD/MM/YYYY" required />

Answer 1

可能有插件，但没有人愿意提供任何插件。 Here's something I've knocked up during my lunch break :).

它并不完美，可以通过一些调整来改进。例如，突出显示要删除的多个字符有点麻烦，但希望这对 10 个字符来说不是一个糟糕的开始。归功于 this post用于获取/设置插入符位置。此外，它现在确实允许无效日期 - 12/34/5678。解决这个问题并不难。我可能会在 Git 上粘贴一些东西，然后在我回到家时完成它。

我已将其硬编码为 dd/mm/yyyy 格式，但同样，通过改进，它可以使用用户区域设置。

$.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;
            if ([2, 5].indexOf(newCaretPos) > -1) {
                _setCaretPosition(this, newCaretPos + 1);
                return false;
            }
            return true;
        }

        // backspace
        if (keyCode == 8) {
            var text = this.value;
            var caret = _getCaret(this);
            if (caret == 3 || caret == 6) {
                caret = caret - 2;
            } else {
                caret--;
            }

            if (caret < 0) {
                return false;
            }

            var output = text.substring(0, caret);
            key = 'd';
            if (caret > 2) {
                key = 'm'
            };
            if (caret > 4) {
                key = 'y'
            };

            this.value = output + key + text.substring(caret + 1);
            _setCaretPosition(this, caret);
            return false;
        }

        if (/[0-9]/.test(key)) {
            var text = this.value;
            var caret = _getCaret(this);

            if (caret > 9) {
                return false;
            }

            var output = text.substring(0, caret);
            this.value = output + key + text.substring(caret + 1);
            _setCaretPosition(this, caret + 1);
        }
        return false;
    });
};

$('.date').textboxDatePicker();

更新

可能是想多了。你能不能只使用 3 个单独的盒子并将它们设计成一个看起来像一个盒子，用一点 JS 来整理它们之间的焦点？

https://jsfiddle.net/w9by2350/3/

MUCH 更清洁!