将常规文本输入转换为 DD/MM/YYYY 格式

Question

我只能使用type="text"，我计划在用户输入字段中键入时获取DD/MM/YYYY格式。

到目前为止，我设法DD/MM/YY/Y.年份应采用YYYY格式。我该怎么做？

$('[data-type="date"]').keyup(function() {
var value = $(this).val();
value = value.replace(/D/g, "").split(/(?:([d]{2}))/g).filter(s => s.length > 0).join("/");
$(this).val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="date" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

Answer 1

您可以尝试为此使用外部插件。快速搜索显示一些包括这个。

以下是它应该如何工作：

$(document).ready(function(){
$('.date').mask('00/00/0000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" class="date">

不过，不要忘记验证输入。

Answer 2

您可以使用以下解决方案将常规文本输入转换为DD/MM/YYYY格式：

$('[data-type="date"]').keyup(function(event) {
var value = $(this).val();
if (event.keyCode !== 8 && value.indexOf("/") === value.lastIndexOf("/")) {
if (value.length > 2 && value[2] != "/") {
value = value.substring(0, 2) + "/" + value.substring(2);
} 
if (value.length > 5 && value[5] != "/") {
value = value.substring(0, 5) + "/" + value.substring(5);
}
}
$(this).val(value);
});

Answer 3

你可以使用jQuery Mask Plugin。有关安装信息

$('[data-type="date"]').mask('00/00/0000');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="date" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

Answer 4

这将做你想要的。它使用Array.reduce将/'s放入日期字符串中，测试我们是否已经过了月份，或者已经在字符串的末尾，以免放入不应该发生的/。

$('[data-type="date"]').keyup(function() {
var value = $(this).val();
value = value.replace(/D/g, "")
.split(/(..)/)
.filter(s => s.length > 0)
.reduce((t, v, i, a) => t + v + (i > 1 || i == a.length - 1 ? '' : '/'), '');
$(this).val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="date" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">