2

Testei esse type num form e ficou muito ruim, ele não aparece nenhum tipo de menu para modificar a hora. No navegador da Google aparece. Fica complicado pois todo tipo de formulário nunca rodará 100% em todos navegadores. Alguma solução?

2
  • O problema mesmo é com o tipo datetime-local, fica igual ao tipo text
    – Costamilam
    Commented 26/04/2018 às 1:15
  • 1
    @GuilhermeCostamilam datetime-local não foi implementado nem no FF nem no Safari (compatibilidade: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…). Tecnlogias novas são assim, exigem testes, implementações em Alphas, Betas e etc. O motivo de não terem implementando é por possiveis limitações, tempo ou planejamento, aonde outras necessidade podem ser mais importantes no momento.
    – Syzoth
    Commented 27/04/2018 às 15:46

2 Respostas 2

2

Conforme nesta documentação no MDN o Firefox até tem suporte ao type, porém não dispõe das setas ▲ e ▼. Creio também que a documentação esteja desatualizada, uma vez que o Firefox mais moderno (Quantum 59.0.2) as horas são no formato 24h, e não 12h como informa a documentação.

Esses tipos (não só o type="time") variam muito de navegador para navegador, pois cada fabricante tende a renderizar da forma que acha melhor ao seu usuário, e não possuem padrões UI definidos.

Print do input type="time" no Firefox:

inserir a descrição da imagem aqui

Para contornar essas situações, você pode recorrer ao CSS + JavaScript para criar algo no mesmo estilo e padronizado, que será exibido igualmente em todos os navegadores.

2
  • Exato, vou ter de recorrer ao JavaScript pois não estou com problema só com o tipo type, pois como você mesmo disse, cada fabricante renderiza de uma forma. Obrigado!
    – WillBill
    Commented 26/04/2018 às 0:12
  • Foi o corretor. Kkkk.
    – WillBill
    Commented 26/04/2018 às 0:27
2

No Chrome também não tem menu, o que tem são setas e uma especie de mascara no campo para digitar.

No Firefox desde a versão 57 (tanto no Firefox Desktop quanto Mobile) existe a mascara e as setas para controle do time, veja um print:

firefox

Se o seu navegador é mais antigo que o 57 então é porque seu Firefox esta desatualizado no seu computador.

Segue lista de navegadores com suporte: https://caniuse.com/#feat=input-datetime

Se fala do menu realmente, deve ter notado no navegador Microsoft Edge ou nos navegadores mobile:

Edge:

input time edge

Navegadores Android (provavelmente Chrome):

input time Android

No Chrome Desktop só aparece isto:

input time chrome desktop

3
  • Vou atualizar o Firefox, deve ser isso. Obrigado.
    – WillBill
    Commented 26/04/2018 às 0:08
  • Atualizei e mesmo assim não adiantou, ele não mostra nenhuma setinha, nenhuma caixinha, nada. Só os tracinhos.
    – WillBill
    Commented 26/04/2018 às 0:18
  • @WillianMoscardi foi o que eu disse, setas não são menu, menu é só no Edge e Android.
    – Syzoth
    Commented 26/04/2018 às 0:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .