为啥 Inputmask 不能正确处理日期？

Posted 2023-05-08

【中文标题】为啥 Inputmask 不能正确处理日期？

【英文标题】：Why is Inputmask not properly handling a date?为什么 Inputmask 不能正确处理日期？

【发布时间】：2019-05-21 07:19:30

【问题描述】：

浏览源代码，看起来加载日期扩展应该允许我使用像mm/dd/yyyy 这样的掩码。

预期行为：点击该字段应该允许我输入类似12/25/2018 的内容，在我键入时用我的输入替换掩码。

实际行为：单击该字段会使用掩码填充该字段，但会将我的光标放在末尾并且不允许我输入。

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'mask': 'mm/dd/yyyy'" />

这个库的documentation 很广泛，但没有为我的特定掩码概述一个示例。我正在阅读源代码，但我想我会把这个问题抛给更熟悉这个库的人。

（注意：我已经标记了这个jquery-inputmask，它指的是现在可以使用或不使用jQuery的这个库。）

【问题讨论】：

我不相信 m、d 或 y 被识别为“替换字符”。相反，您必须指定您想要的digits，这可以使用9 来完成。例如，99/99/9999。 或者，它说date 扩展（您已经包含在内）允许您简单地使用别名date。

【参考方案1】：

我从未使用过这个库，但我是根据您链接的文档编写的：

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'alias': 'datetime', 'inputFormat': 'dd/mm/yyyy'" />

【讨论】：

谢谢，我认为这是“正确”的解决方案。我希望文档比“格式”标题下的简介更深入。我也希望它能正确处理12/31/1994 - 在我输入3 后不要跳到那一年。但这看起来是这个库的最佳解决方案。

12/31/1994 是美国格式，因此与dd/mm/yyyy 不匹配，因此输入123 后得到12/03/yyyy 是完全合理的。它认为那部分是正确的。另一方面，文档当然假设您已经熟悉该库。

哇，我花了大约两个小时盯着这东西，然后以为图书馆搞错了。感谢您接听！

【参考方案2】：

'mm/dd/yyyy' 应该是占位符，'99/99/9999' 应该是掩码：

Inputmask().mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input id="input" data-inputmask="'mask': '99/99/9999', 'placeholder': 'mm/dd/yyyy'" />

或者，您可以使用date 输入：

<input type='date' />

【讨论】：

这可能是这个插件的最佳选择。但它会允许用户输入55/55/5555，这不是一个有效的日期。它还会禁止5/5/1995，要求用户指定05/05/1995。同样可能是最好的情况，但我觉得这个库一定比这更强大。

您考虑过使用date 输入吗？ - 请参阅我更新的答案中的示例

那是我第一次尝试，但是（支持不佳）[caniuse.com/#feat=input-datetime] 驱使我去屏蔽。

看来"'alias': 'datetime', 'inputFormat': 'dd/mm/yyyy'" 是更好的解决方案

似乎如此，尽管并不完美（请参阅我对该答案的评论）。无论如何感谢您的建议！

【参考方案3】：

你已经包含了日期扩展，允许你做 alias: "datetime", inputFormat: "dd/mm/yyyy"。

Inputmask( alias: "datetime", inputFormat: "dd/mm/yyyy" ).mask("input");

<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@4.0.4/dist/inputmask/inputmask.date.extensions.js"></script>

<input />