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.
|
1 2 3 4 5 6 7 8 9 |
jQuery('[data-role="date"]).mask("TC99/M9/D9", { placeholder: "____/__/__", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true} } }); |
O código acima pode mascarar e pre-validar datas no formato ANO/MÊS/DIA ..
Com um INPUT como
|
1 |
<input type="text" data-role="date" value="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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var maskBehaviorDateTime = function (val, e, field) { // This function must return a MASK var msk = "TC99/M9/D9"; // Our desired format var v = field.is('input') ? field.val() : field.text(); // is a input or another html element?? v = v.replace(/\D/g, ''); // stripe non digits if (v != '') { // has value? if ((/^[01]\d[0-3]\d\d{4}$/).test(v)) { //test if pattern match Month/Day/Year only v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1'); } else if ((/^[01]\d[0-3]\d\d{4}[012]\d[0-5]\d$/).test(v)) { //test if pattern match Month/Day/Year Hour:Minute v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1'); // If we need to show hour and minute, returned mask must be changed too // 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 and m must be exists in Translation options } field.is('input') ? field.val(v) : field.text(v); } return msk; }, optionsDateTime = { placeholder: "____/__/__", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true}, "h": {pattern: /[0-2]/, optional: true, recursive: true}, "m": {pattern: /[0-5]/, optional: true, recursive: true} } }; jQuery('[data-role="date"]').mask(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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var maskBehaviorDateTime = function (val, e, field) { // 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"; if (field.attr("data-original-value") == undefined) { var o = field.is('input') ? field.val() : field.text(); } else { var o = field.attr("data-original-value"); } v = o.replace(/\D/g, ''); if (v != '') { field.attr("data-original-value") == undefined && field.attr("data-original-value", o); if ((/^[12][09]\d{2}[01]\d[0123]\d$/).test(v)) { // year/month/day 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$/).test(v)) { // year/month/day hour: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"; } else if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$/).test(v)) { // year/month/day hour:minute: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"; } field.is('input') ? field.val(v) : field.text(v); } return msk; }, optionsDateTime = { placeholder: "__/__/____", translation: { "D": {pattern: /[0-3]/, optional: false, recursive: true}, "M": {pattern: /[01]/, optional: false, recursive: true}, "T": {pattern: /[12]/, optional: false, recursive: true}, "C": {pattern: /[09]/, optional: false, recursive: true}, "h": {pattern: /[0-2]/, optional: true, recursive: true}, "m": {pattern: /[0-5]/, optional: true, recursive: true}, "s": {pattern: /[0-5]/, optional: true, recursive: true} }, }; jQuery('[data-role="date"]').mask(maskBehaviorDateTime, optionsDateTime); |
Com um INPUT como
|
1 |
<input type="text" data-role="date" value="2018-06-11 15:40"> |
Saída será 11/06/2018 15:40
Espero que isto ajude a!