Rss

  • youtube
  • linkedin
  • google

Archives for : RegexP

Usando jQueryMask Plugin para formatar datas em diferentes padrões

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.

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

Com um INPUT como

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

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 o campo m números entre 0 e o campo 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 o campo .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

Com um INPUT como

Saída será 11/06/2018 15:40

Espero que isto ajude a!