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


  1. 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;

  2. Avança ou regride o espaço de tempo selecionado;

  3. Hoje: o símbolo informa qual a data atual;

  4. Horário: ao clicar em hora, minuto ou segundo a janela é alterada para a seleção do valor;

  5. 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êsNome em inglêsDescriçã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

Entrada de Texto (mobile)


Botão do Componente


Imagem no Editor Visual