使用 jQueryMask 插件在不同模式下设置日期格式
jQuery 掩码插件 是一个伟大的 Javascript 库, 用于格式化字段以供演示和/或强制用户正确输入.
这里, 我演示如何处理输入或其他 HTML 元素, 以便在源日期与目标元素的格式不同时显示日期.
示例:
- 我们有一个日期时间与 年-月-日小时:分钟:秒 只需要显示 年/月/日 部分.
- 我们有一个日期在 年月日 并需要格式化为 日/月/年.
jQueryMask 是非常简单的使用. 它不需要太多, 以掩盖任何你需要的. 看看他的网站上的例子.
如果需要设置简单日期字段的格式 (即使在非输入元素中), 只需使用下面的代码.
jQuery('[数据角色 ="日期"]).面具("TC99/M9/D9", { 占 位 符: "____/__/__", 翻译: { "D": {模式: /[0-3]/, 选: 假, 递 归: 真正的}, "M": {模式: /[01]/, 选: 假, 递 归: 真正的}, "T": {模式: /[12]/, 选: 假, 递 归: 真正的}, "C": {模式: /[09]/, 选: 假, 递 归: 真正的} } });
上面的代码可以对日期进行掩码和预验证。 年/月/日 格式.
输入像
<输入类型 ="文本" 数据角色 ="日期" 值 ="2018-06-11 15:47" />
将改变他的价值 2018/06/11.
如果您尝试键入另一个日期 (清除后, 答案是肯定的) 您不能从不同的数字开始 1 或 2. 这是因为我们的面具有一个翻译要做时, 允许字符. 如果模式不匹配, 字符被擦除.
The meaning of “;TC99/M9/D9”; 掩码是:
- 必须从 1 或 2 (翻译 T: /[12]/ –; 自定义格式)
- 必须有数字 0 或 9 (翻译 C: /[09]/ –; 自定义格式)
- 必须有一个数字 (任何) (翻译 9 –; MaskPlugin 核心格式)
- 必须有一个数字 (任何) (翻译 9 –; MaskPlugin 核心格式)
- 斜线将自动添加 ( / )
- 必须有数字 0 或 1 (翻译 M: /[01]/ –; 自定义格式)
- 必须有一个数字 (任何) (翻译 9: MaskPlugin 核心格式)
- 斜线将自动添加 ( / )
- 必须有数字 0, 1, 2 或 3 (翻译 D: /[0-3]/ –; 自定义格式)
- 必须有一个数字 (任何) (翻译 9: MaskPlugin 核心格式)
答案是肯定的, 没有真正的验证. You can type “;2999/19/39”; 这不是一个有效的日期, 但几乎完成.
所以, 以另一种方式格式化, 只是更改掩码参数顺序.
但, 如果源日期的模式不同, 如月/日/年, 掩码不工作. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.
要处理不同的日期格式, 需要的不仅仅是简单的掩码. 我们将需要一个函数.
查看下面的代码
var maskBehaviorDateTime = 函数 (瓦尔, 和, 领域) { // This function must return a MASK var msk = "TC99/M9/D9"; // Our desired format var v = field.is(输入) ? 字段. val() : 字段. 文本(); // 是一个输入或另一个 html 元素?? v = v 替换(/\D/克, ''); // stripe non digits if (V != '') { // 具有价值? 如果 ((/^[01]\D[0-3]\d d{4}$/).测试(V)) { //test if pattern match Month/Day/Year only v = v.replace(/^(\D{4})(\D{2})(\D{2})$/, ' $ 3/$ 2/$ 1 '); } 否则, 如果 ((/^[01]\D[0-3]\d d{4}[012]\D[0-5]\d $/).测试(V)) { //测试模式匹配月份/日/年小时:Minute v = v.replace(/^(\D{2})(\D{2})(\D{4})(\D{2})(\D{2})$/, ' $ 3/$ 2/$ 1 '); // 如果我们需要显示小时和分钟, 返回的掩码也必须更改 // v = v 替换(/^(\D{2})(\D{2})(\D{4})(\D{2})(\D{2})$/, $ 3/2 元/1 元 $4:$5'); // msk = ' TC99/M9/D9 h9:m9 '; // 必须在翻译选项中存在 h 和 m } 字段。(输入) ? 字段. val(V) : 字段. 文本(V); } 返回 msk; }, optionsDateTime = { 占 位 符: "____/__/__", 翻译: { "D": {模式: /[0-3]/, 选: 假, 递 归: 真正的}, "M": {模式: /[01]/, 选: 假, 递 归: 真正的}, "T": {模式: /[12]/, 选: 假, 递 归: 真正的}, "C": {模式: /[09]/, 选: 假, 递 归: 真正的}, "H": {模式: /[0-2]/, 选: 真正的, 递 归: 真正的}, "m": {模式: /[0-5]/, 选: 真正的, 递 归: 真正的} } }; jQuery('[数据角色 ="日期"]').面具(maskBehaviorDateTime, optionsDateTime);
现在我们有两种翻译模式 (h 和 m). H 表示 n 索引位置必须有数字 0, 1 或 2 和 m 之间的数字 0 和 5. 请记住, 案件事项.
使用上面的代码, 我们可以通过多种方式格式化和显示日期. 只是改变 .测试() 和 .取代() 模式以填充所需的模式.
这是我使用的代码, 用于格式化数据库日期时间字段 (以年月份为日期)。:分钟:第二个 html 元素的日期/年/月小时:分钟
var maskBehaviorDateTime = 函数 (瓦尔, 和, 领域) { // 如果已经有一个值, 标准 dd/mm/日化的格式与可选的 hh:毫米:ss var msk = "TC99/M9/D9 h9:m9:s9"; 如果 (attr 领域。("原始日期-值") == 未定义) { var o = 字段。(输入) ? 字段. val() : 字段. 文本(); } 还 { var attr = 字段。("原始日期-值"); } v = 替换(/\D/克, ''); 如果 (V != '') { attr 领域。("原始日期-值") == undefined && attr 领域。("原始日期-值", 的); 如果 ((/^[12][09]\D{2}[01]\D[0123]\d $/).测试(V)) { // year/month/day v = v.replace(/^(\D{4})(\D{2})(\D{2})$/, ' $ 3/$ 2/$ 1 '); msk = "D9/M9/TC99"; } 否则, 如果 ((/^[12][09]\D{2}[01]\D[0123]\D[012]\D[0-5]\d $/).测试(V)) { // 年/月/日小时:minute v = v.replace(/^(\D{4})(\D{2})(\D{2})(\D{2})(\D{2})$/, $ 3/2 元/1 元 $4:$5'); msk = "D9/M9/TC99 h9:m9"; } 否则, 如果 ((/^[12][09]\D{2}[01]\D[0123]\D[012]\D[0-5]\D[0-5]\d $/).测试(V)) { // 年/月/日小时:分钟:second v = v.replace(/^(\D{4})(\D{2})(\D{2})(\D{2})(\D{2})(\D{2})$/, $ 3/2 元/1 元 $4:$5:$6'); msk = "D9/M9/TC99 h9:m9:s9"; } 字段。(输入) ? 字段. val(V) : 字段. 文本(V); } 返回 msk; }, optionsDateTime = { 占 位 符: "__/__/____", 翻译: { "D": {模式: /[0-3]/, 选: 假, 递 归: 真正的}, "M": {模式: /[01]/, 选: 假, 递 归: 真正的}, "T": {模式: /[12]/, 选: 假, 递 归: 真正的}, "C": {模式: /[09]/, 选: 假, 递 归: 真正的}, "H": {模式: /[0-2]/, 选: 真正的, 递 归: 真正的}, "m": {模式: /[0-5]/, 选: 真正的, 递 归: 真正的}, "s": {模式: /[0-5]/, 选: 真正的, 递 归: 真正的} }, }; jQuery('[数据角色 ="日期"]').面具(maskBehaviorDateTime, optionsDateTime);
输入像
<输入类型 ="文本" 数据角色 ="日期" 值 ="2018-06-11 15:40">
输出将
11/06/2018 15:40
希望这能帮到你!
一个回应
非常好.
佩纳克 ·穆伊托·阿基沃·普拉分配公司.