RSS

  • YouTube
  • LinkedIn
  • 谷歌

档案 : jQuery

使用 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 = 函数 (瓦尔, 和, 领域) { // 这个函数必须返回一个掩码 "TC99/M9/D9"; // 我们所期望的格式 var v = 字段。(输入) ? 字段. val() : 字段. 文本(); // 是一个输入或另一个 html 元素??
                    v = v 替换(/\D/克, ''); // 条带非数字, 如果 (V != '') { // 具有价值?
                        如果 ((/^[01]\D[0-3]\d  d{4}$/).测试(V)) { //测试模式匹配月份/日/年仅 v = v 替换(/^(\D{4})(\D{2})(\D{2})$/, ' $ 3/$ 2/$ 1 ');
                        } 否则, 如果 ((/^[01]\D[0-3]\d  d{4}[012]\D[0-5]\d $/).测试(V)) { //测试模式匹配月份/日/年小时:分钟 v = v 替换(/^(\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:毫米:无功 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)) { // 年/月/日 v = v 替换(/^(\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)) { // 年/月/日小时:分钟 v = v 替换(/^(\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)) { // 年/月/日小时:分钟:第二 v = v 替换(/^(\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

希望这能帮到你!

回调() 在互联网资源管理器中无法正常工作

最近,我使用 javascript 代码的问题 jQuery 和它在不同的浏览器一样工作 , 的 火狐浏览器 和某些版本的 互联网资源管理器, 但是,顽固地拒绝在工作 互联网资源管理器 7 8.
遵循代码:

$.发布(URL,{ 选项 }, 
  功能 (响应) {
     $('' #myElement).HTML(响应);
  },
' 文本 ');

在一些测试后意识到有问题的方法, 在其他代码他表现如预期.
所以它是只是修复 IE 和实现一个小的语法错误在 HTML 中彻底调试代码和 Ajax 方法的答案 7 显示正确答案.
然后按照提示, 如果你有问题的方法 jQuery.html(), 首先检查是否正在写入元素中的内容是没有错误的 html 代码, 因为验证 IE 7/8 会写 HTML 并且不显示错误, 无论多么渺小.