30.12.2024

Como Mudar o Formato da Data no Elemento Input em HTML sem JS

Resposta Rápida

O elemento de entrada de data em HTML <input type="date"> utiliza por padrão o formato AAAA-MM-DD, o qual não pode ser modificado através do HTML. No entanto, para exibir a data em um formato desejado, você pode utilizar o JavaScript. Aqui está um exemplo simples de código:

const formatarData = (input) => new Date(input.value).toLocaleDateString('pt-BR'); // O formato 'pt-BR' exibe a data no formato DD/MM/AAAA
document.querySelector('input[type="date"]').onchange = (e) => console.log(formatarData(e.target)); // Monitora mudanças no campo e imprime no console.

Observe que a data enviada para o servidor, apesar da localização do cliente, é salva no formato padrão AAAA-MM-DD.

Redesenhando a Interface do Usuário para Melhor Exibição da Data

Como não é possível alterar diretamente o formato do elemento <input type="date">, você pode melhorar sua usabilidade exibindo a data em um formato mais familiar para o usuário:

• Crie um campo oculto para armazenar os dados da data e um campo de texto para mostrar a data no formato preferido.
• Adicione um botão para chamar o seletor de calendário padrão.
• Sincronize este bloco de texto com a data selecionada usando JavaScript.

Considerando um Público Internacional

Reconhecer as preferências dos usuários é essencial para criar soluções universais:

• Determine a localidade do usuário usando navigator.language e formate a data adequadamente no método toLocaleDateString.
• Se a detecção automática da localidade falhar, ofereça um formato de data universal ou dê ao usuário a opção de escolher.

Abordando Questões de Compatibilidade de Navegadores e Validação

Para garantir a funcionalidade correta da data em diferentes navegadores, é aconselhável:

• Testar o código em vários navegadores.
• Usar o atributo pattern para validar a entrada do usuário enquanto as funções de formatação são tratadas pelo JavaScript.

Utilizando Bibliotecas Externas

Tarefas complexas podem exigir ferramentas adicionais:

• Utilize a jQuery DatePicker ou bibliotecas similares para funcionalidades ampliadas, incluindo configurações de localização e formato personalizado.
• Se você deseja evitar dependências do jQuery ou de outras bibliotecas, pode optar pelo JavaScript puro.

Visualização

Representação do calendário (📅) com um símbolo de cadeado (🔒):

| Entrada de Data em HTML | Formato da Data na Localidade do Usuário |
| ------------------------ | ----------------------------------------- |
| <input type="date">      | 📅🌐🔒                                    |

Entrada estritamente aderente ao formato da data na localidade do usuário.

- `<input type="date">` - um elemento HTML para inserção de datas.
- 📅🌐 indica que a data está vinculada a um contexto global e depende da localidade.
- 🔒 sinaliza que o formato é fixo e não pode ser alterado diretamente por meio de atributos.

Capturando a Interação do Usuário para uma Melhor Experiência

Para garantir uma melhor experiência ao usuário, você deve:

• Definir placeholders que indiquem o formato esperado da data.
• Organizar o tratamento de eventos como onchange para responder rapidamente à entrada do usuário.
• Usar elementos de UI, como ícones e dicas contextuais para uma interação mais intuitiva e amigável.

Criando uma Interface do Usuário Atrativa

Com CSS, você pode personalizar a aparência do campo de entrada de data, garantindo um design visual atraente e consistente:

• Estilize o campo de texto de acordo com o design geral do formulário.
• Posicione o botão de invocação do calendário de forma que fique fácil e claro para os usuários utilizarem.

Recursos Úteis

1. <input>: Elemento de Entrada (Formulários) - HTML: Linguagem de Marcação Hipertexto | MDN
2. Tipos de Entrada de Dados em HTML
3. Padrão HTML
4. Desenhando o Seletor de Data e Hora Perfeito — Smashing Magazine
5. Criando Páginas Web

Video

Navigation