Função
O componente Data e Hora é um componente entrada de texto com sua propriedade tipo deve ser 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 da componente data e hora
Seleção do espaço de tempo: o calendário começa exibindo o mês atual, ao clicar nessa área será exibido os meses 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 símbolo 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 descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
Título | content | Define o rótulo do campo. |
Valor | ng-model | Propriedade Angular que faz a vinculo do componente com o formulário. |
Identificador | id | Gera um ID automaticamente para o componente, mas que pode ser alterado. |
Tipo | type | Define o tipo de dado que o campo receberá. O campo deve está marcado como datetime 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. Essa propriedade só deve ser utilizada em campos do tipo texto usando máscaras, exemplo CPF, CNPJ, telefone e outros. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Data e Hora.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Título | Title | Estiliza o título do componente. |
Entrada de Dados | Input Style | Estiliza a entrada de dados do componente. |
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 na camada cliente.
Nome em inglês
Datetime
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual
