Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 3 Próxima »

Função

O componente Data é um componente entrada de texto, mas com sua propriedade tipo setada para date. Ao clicar no campo, um calendário é exibido para que o usuário possa selecionar a data ao invés de digitá-la.

Figura 1 - Exemplo do componente rodando no simulador

Uso

O componente Data possui diversas funcionalidades para facilitar o usuário na escolha da data.

Figura 2 - Identificação das funcionalidades do componente data


  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 mês 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 simbolo informa qual a data atual;

  4. Data atual: ao clicar o campo altera para a data atual.

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Nome

Propriedade

Função

Valor

ng-model

Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.

Identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Conteúdo

content

Define o rótulo do campo.

Tipo

type

Propriedade usada para definir o tipo de entrada. 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.

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.


Nome em inglês

Date


Nessa página


Compatibilidade

  • Formulário web


Equivalente mobile

Entrada de texto (mobile)


Botão do Componente



Imagem no Editor Visual



  • Sem rótulos