jQuery Mask Plugin é uma grande biblioteca de Javascript para formatar campos para apresentação e/ou para forçar uma entrada corretamente pelos utilizadores.

Aqui, Eu Mostro como lidar com INPUT ou outro elemento HTML para exibir datas quando a data de origem tem um formato diferente do elemento de destino.

Exemplo:

• Temos um data-hora com Ano-mês-dia hora:Minuto:Segundos e é preciso mostrar apenas o fragmento Ano/Mês/Dia (sem hora:minuto:segundo).
• Temos da data em Ano-mês-dia e é preciso formatar para Dia/mês/ano.

jQueryMask é muito simples de usar. Ele não precisa muito para mascarar o que você precisar. Veja exemplos em seu site.

Se você precisa formatar um campo de data simples (mesmo em um elemento não INPUT), Basta usar o código abaixo.

jQuery('[dados-papel ="Data"]).máscara("TC99/M9/D9", {
        espaço reservado: "____/__/__",
        Tradução: {
            "D": {padrão: /[0-3]/, opcional: falso, recursiva: true},
            "M": {padrão: /[01]/, opcional: falso, recursiva: true},
            "T": {padrão: /[12]/, opcional: falso, recursiva: true},
            "C": {padrão: /[09]/, opcional: falso, recursiva: true}
        }
    });

O código acima pode mascarar e pre-validar datas no formato ANO/MÊS/DIA ..

Com um INPUT como

<;tipo de entrada ="texto" dados-papel ="Data" valor ="2018-06-11 15:47" />;

teria alterado seu valor para 2018/06/11.

Se você tentar digitar outra data (depois de limpar, é claro) Você não pode começar com um número diferente de 1 ou 2. Por esta razão é que a nossa máscara tem um translation para ser feito quando permitindo caracteres. Se não coincide com o padrão, o caractere é apagado.

The meaning of “;TC99/M9/D9”; é:

• Deve começar com 1 ou 2 (Tradução T: /[12]/ –; Formato personalizado)
• Deve ter número 0 ou 9 (Tradução de C: /[09]/ –; Formato personalizado)
• Deve ter um número (qualquer) (Tradução 9 –; Formato do Core MaskPlugin)
• Deve ter um número (qualquer) (Tradução 9 –; Formato do Core MaskPlugin)
• Uma barra será adicionada automaticamente ( / )
• Deve ter número 0 ou 1 (Tradução M: /[01]/ –; Formato personalizado)
• Deve ter um número (qualquer) (Tradução 9: Formato do Core MaskPlugin)
• Uma barra será adicionada automaticamente ( / )
• Deve ter número 0, 1, 2 ou 3 (Tradução D: /[0-3]/ –; Formato personalizado)
• Deve ter um número (qualquer) (Tradução 9: Formato do Core MaskPlugin)

É claro, Não há nenhuma validação real. You can type “;2999/19/39”; e isto não é uma data válida, Mas está quase pronto.

Então, para Formatar de outra maneira, Basta alterar a ordem de parâmetro de máscara.

Mas, se a data de origem estiver em um padrão diferente, como dia/mês/ano, a máscara não funciona. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.

Para manipular data diferente formatos serão necessários mais do que simples máscara. Vamos precisar de uma função.

Veja o código abaixo

        var maskBehaviorDateTime = função (Val, e, campo) { // Esta função deve retornar uma máscara var msk = "TC99/M9/D9"; // Nosso formato desejado var v = field.is('entrada') ? Field.Val() : Field.Text(); // é uma entrada ou outro elemento html??
                    v = v.replace(/\D/g, ''); // listra de dígitos não se (v != '') { // tem valor?
                        se ((/^[01]\d[0-3]\dd{4}$/).teste(v)) { //testar se o padrão corresponde a v único dia/mês/ano = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                        } senão se ((/^[01]\d[0-3]\dd{4}[012]\d[0-5]\d$ /).teste(v)) { //teste se o padrão corresponde a hora do dia/mês/ano:Minuto v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                            // Se nós precisamos mostrar a hora e minuto, máscara retornada deve ser também mudou
                            // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                            // MSK = ' TC99/M9/D9 h9:M9'; // h e m devem ser existe em opções de tradução
                        }
                        Field.is('entrada') ? Field.Val(v) : Field.Text(v);
                    }
                    retornar a msk;
                },
                optionsDateTime = {
                    espaço reservado: "____/__/__",
                    Tradução: {
                        "D": {padrão: /[0-3]/, opcional: falso, recursiva: true},
                        "M": {padrão: /[01]/, opcional: falso, recursiva: true},
                        "T": {padrão: /[12]/, opcional: falso, recursiva: true},
                        "C": {padrão: /[09]/, opcional: falso, recursiva: true},
                        "h": {padrão: /[0-2]/, opcional: true, recursiva: true},
                        "m": {padrão: /[0-5]/, opcional: true, recursiva: true}
                    }
                };
        jQuery('[dados-papel ="Data"]').máscara(maskBehaviorDateTime,  optionsDateTime);

Agora temos mais dois Translation Pattern (h e m). h significa que a posição n-índice deverá ter números 0, 1 ou 2 e m números entre 0 e 5. Tenha em mente que o CASO importa.

Com o código acima, Podemos Formatar e mostrar data de várias maneiras. Apenas mude .teste() e .Substitua() padrão para preencher seu padrão desejado.

Este é o código que estou usando para formatar os campos datetime do banco de dados com ANO-MÊS-DIA HORA:MINUTO:SEGUNDO em elementos html com dia/mês/ano hora:MINUTO

    var maskBehaviorDateTime = função (Val, e, campo) {
            // Caso já exista um valor, o formata no padrão dd/mm/yyyy com o opcional hh:mm:SS var msk = "TC99/M9/D9 h9:M9:S9";
            se (field.attr("data-original-value") == undefined) {
                var o = field.is('entrada') ? Field.Val() : Field.Text();
            } else {
                var o = field.attr("data-original-value");
            }
            v = o.replace(/\D/g, '');
            se (v != '') {
                field.attr("data-original-value") == undefined &;&; field.attr("data-original-value", o);
                se ((/^[12][09]\d{2}[01]\d[0123]\d$ /).teste(v)) { // ano/mês/dia v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                    MSK = "D9/M9/TC99";
                } else  if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$ /).teste(v)) { // ano/mês/dia/hora:minuto v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                    MSK = "D9/M9/TC99 h9:M9";
                } senão se ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$ /).teste(v)) { // ano/mês/dia/hora:minuto:segundo 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";
                }
                Field.is('entrada') ? Field.Val(v) : Field.Text(v);
            }

            retornar a msk;
        },
        optionsDateTime = {
            espaço reservado: "__/__/____",
            Tradução: {
                "D": {padrão: /[0-3]/, opcional: falso, recursiva: true},
                "M": {padrão: /[01]/, opcional: falso, recursiva: true},
                "T": {padrão: /[12]/, opcional: falso, recursiva: true},
                "C": {padrão: /[09]/, opcional: falso, recursiva: true},
                "h": {padrão: /[0-2]/, opcional: true, recursiva: true},
                "m": {padrão: /[0-5]/, opcional: true, recursiva: true},
                "s": {padrão: /[0-5]/, opcional: true, recursiva: true}
            },
        };
    jQuery('[dados-papel ="Data"]').máscara(maskBehaviorDateTime,  optionsDateTime);

Com um INPUT como

<;tipo de entrada ="texto" dados-papel ="Data" valor ="2018-06-11 15:40">;

Saída será

11/06/2018 15:40

Espero que isto ajude a!