Neste tutorial, vou mostrar-lhe como implementar entradas de data e hora nos seus formulários Web. Explicarei os diferentes tipos de entrada disponíveis e darei dicas valiosas para uma utilização prática. Abordaremos a introdução de data e de hora para que fique a saber como implementar estas funções.
Principais conclusões
- O tipo de introdução de data permite-lhe selecionar apenas uma data.
- O tipo de entrada dateTime-local combina data e hora sem ajuste de fuso horário.
- A formatação das informações de data e hora é normalizada de acordo com a norma ISO 8601.
- Os browsers podem ter propriedades de visualização diferentes para a introdução da data e da hora.
Noções básicas sobre a introdução de data e hora
Para implementar a introdução de data e hora nos formulários, são necessários os tipos de introdução HTML date, dateTime-local e time. O tipo de entrada date permite ao utilizador selecionar uma data, enquanto o tipo dateTime-local capta tanto a data como a hora. Este último é enviado sem ajuste de fuso horário, o que significa que a entrada é enviada para o servidor tal como é feita pelo utilizador.
Vejamos agora estes tipos em pormenor.
Utilizar o tipo de introdução de data
Para pedir uma data pura, pode utilizar o tipo de data. Isto permite ao utilizador selecionar uma data através de uma ferramenta de calendário incorporada, o que melhora a usabilidade.
Quando se abre a ferramenta de calendário, é possível selecionar diferentes datas e enviá-las clicando em "Enviar". A data é transmitida num formato normalizado: ano-mês-dia.
É importante saber que a apresentação do calendário pode variar consoante o programa de navegação. As definições regionais do seu sistema operativo influenciam o formato em que a data é apresentada.
Entradas de data e hora com dateTime-local
Se pretender introduzir uma data e uma hora, deve utilizar o tipo dateTime-local. Este tipo funciona de forma semelhante à consulta de data, exceto que também é possível introduzir uma hora.
É possível selecionar tanto o dia como a hora. Curiosamente, a hora é apresentada no formato de 24 horas se não estiver ativado o formato AM/PM nas suas definições locais.
Quando submeter o formulário, também receberá os dados no formato ISO e a hora permanecerá inalterada sem ser convertida para um fuso horário diferente.
Utilização da hora
O tipo de entrada de hora permite-lhe especificar apenas a hora sem a data. É possível utilizar este tipo para selecionar a hora, que é então também transferida no formato de 24 horas.
Integração de outros formatos de data
Para além dos tipos acima mencionados, existe também a opção de introduzir semanas (week) e meses (month). Utilizando o formato de semana, é possível introduzir semanas específicas e selecionar simplesmente a semana pretendida.
O mesmo se aplica ao formato de mês. Aqui tem a opção de selecionar apenas o mês sem especificar dias específicos.
Definições e valores por defeito
Outra dica útil é a opção de definir valores por defeito para os seus campos de entrada. Por exemplo, pode especificar que uma determinada data é predefinida por defeito para a seleção da data e da hora.
Fusos horários e compatibilidade do browser
Um aspeto fundamental na utilização de informações de data e hora é o fuso horário. As entradas são guardadas tal como são introduzidas localmente. Não encontrará quaisquer ajustes de fuso horário neste contexto, pelo que pode transferir diretamente a hora local.
No entanto, é importante notar que o suporte para estes tipos de entrada pode variar consoante o browser. Embora date e dateTime-local sejam suportados por quase todos os browsers populares, recomenda-se a consulta de sítios Web como "Can I use" para verificar se as funções específicas também funcionam nos browsers do seu grupo-alvo.
Resumir
Em resumo, tem agora uma visão geral da implementação de entradas de data e hora nos formulários do seu sítio Web. Conhece os diferentes tipos de entrada, os seus formatos e a importância das definições do utilizador. Lembre-se de que a formatação adequada e o suporte do browser são fundamentais para criar uma experiência perfeita para os seus utilizadores.
Perguntas frequentes
Qual é a diferença entre date e dateTime-local?date apenas permite a seleção de uma data, enquanto dateTime-local permite tanto a data como a hora.
Como é que o fuso horário é tratado com dateTime-local? A hora é transmitida tal como foi introduzida localmente, sem ajustamento aos fusos horários.
Quais os browsers que suportam estes tipos de entrada?Os browsers mais comuns suportam date e dateTime-local; para funções específicas, pode ser consultada a secção "Posso utilizar".
Posso definir preferências para os campos de data?Sim, pode definir preferências para os campos de entrada utilizando o atributo value.
Que formatos são utilizados para a transmissão?Os dados são transmitidos no formato ISO (ano-mês-dia para a data, ano-mês-dia T horas:minutos:segundos para a data e a hora).
