O componente data é uma entrada de texto com sua propriedade tipo setada para datetime. Além disso, ao clicar no campo, um calendário com hora é exibido para que o usuário possa selecionar a data e hora ao invés de digitá-la.
Figura 1 - Exemplo do componente rodando no Browser
Uso
O componente Data e Hora possui diversas funcionalidades para facilitar o usuário.
Figura 2 - Identificação das funcionalidades do componente data
Seleção do espaço de tempo: O calendário começa exibindo o mês atual, ao clicar nessa área será exibido os mês do ano, clicando novamente exibirá os anos da década e por último as décadas do século;
Avança ou regride o espaço de tempo selecionado;
Hoje: O simbolo informa qual a data atual;
Horário: Ao clicar em hora, minuto ou segundo a janela é alterada para a seleção do valor;
Avança ou regride a hora, minuto ou segundo.
Principais propriedades
Na tabela abaixo estão descritos as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome
Propriedade
Função
Valor
ng-model
Propriedade AngularJS que faz a vinculo do componente com o formulário.
Identificador
id
Gera um ID automaticamente para o componente, mas que pode ser alterado.
Conteúdo
content
Define o rótulo do campo.
Tipo
type
Define o tipo de dado que o campo receberá. O campo deve está marcado como date para funcionar.
Máscara
mask
Define como a data será exibida.
Requerido
ng-required
Define que o campo é preenchimento obrigatório.
Sugestão
placeholder
Exibe um exemplo de resposta para o usuário quando o campo está vazio.
Sugestão de máscara
mask-placeholder
Exibe um exemplo de resposta no momento que o usuário insere os dados, os caracteres são substituídos à medida que o usuário digita.
Máscara
Use essa propriedade para escolher como deseja exibir a data, podendo usar qualquer padrão, exemplo: Dia/Mês/Ano ou Mês-Dia-Ano ou outros. Para mais detalhes sobre máscara, acesse: Formatação de máscaras para campos de texto.