Datas, horas e períodos
Data do pedido, hora da entrega, vigência de um contrato: a pessoa digita ou escolhe no calendário, e o banco recebe a data no formato dele. Você escolhe o tipo e o formato de gravação; a máscara de digitação, o calendário e a conversão já vêm prontos.
Qual campo para qual data
Todos guardam um instante ou um intervalo. O que muda é o que a pessoa faz: digita uma data com máscara, escolhe uma hora, marca de um dia até outro, ou troca o mês do painel.
| Sua situação | Componente certo |
|---|---|
| Só a data — vencimento, emissão, nascimento | Data |
| Só a hora — horário de abertura, hora da entrega | Hora |
| Data e hora no mesmo campo — agendamento, registro de ocorrência | Data e Hora |
| De um dia até outro, em duas colunas — vigência, safra, férias | Período |
| Trocar o mês e o ano de um painel de indicadores | Período (mês/ano), dentro do bloco de filtros do Dashboard |
| Só mostrar a data numa lista, já formatada | Listagem, no Formato de data da coluna |
| Filtrar uma lista por data ou intervalo | Filtrar |
Colocar na tela
- Abra o formulário no Studio e clique com o botão direito na Linha onde o campo vai ficar.
- Escolha Data, Hora, Data e Hora ou Período na categoria Campos.
- Em Nome, escolha a coluna da tabela. O Período pede duas: Nome (início) e Nome (fim).
Configurar a data
- Em Label, o texto acima do campo. Marque Obrigatório quando não pode ficar vazio.
- Em Valor padrão, abra a aba de data e hora e escolha Hoje (data) para o campo nascer preenchido num registro novo. Ao editar, vale a data gravada.
- Em Data mínima e Data máxima, limite o calendário — os dias fora da faixa ficam apagados.
- Na seção Formato, deixe Máscara de exibição em dd/mm/yyyy e mude só a Máscara do banco se a coluna guarda a data de outro jeito.
- Dica é uma frase curta abaixo do campo.
Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.
Hora, e data com hora
- O campo Hora usa o relógio do próprio navegador: a aparência muda de um navegador para outro e não há máscara nem calendário.
- O campo Data e Hora usa o mesmo calendário da Data, com uma faixa Hora: e os botões Agora e Aplicar.
- Em Formato, as máscaras têm as variantes com segundos — dd/mm/yyyy hh:ii:ss — para quando o segundo importa.
- Direção do popup decide se o calendário abre alinhado à esquerda ou à direita do campo; útil na borda direita da tela.
Um período em duas colunas
- O Período grava em duas colunas: Nome (início) e Nome (fim). As duas precisam existir na tabela.
- Ligue Presets padrão para a pessoa ganhar os atalhos: Hoje, Ontem, Últimos 7 dias, Últimos 30 dias, Este mês, Mês passado, Este trimestre, Este ano.
- Limpável mostra o × que esvazia as duas datas.
- Em Intervalo máximo (dias), limite o tamanho do período — 90 para um relatório trimestral.
- Valor padrão (início) e (fim) preenchem o período num registro novo.
Testar antes de entregar
Salve a tela e publique no Teste online. Confira nesta ordem:
| O que fazer | O que tem que acontecer |
|---|---|
| Digitar 15032026 no campo de data | O campo mostra 15/03/2026 e o calendário pula para março. |
| Salvar e reabrir o registro | A data volta igual, no mesmo formato. |
| Digitar só 15/03 e clicar fora | O campo esvazia: data incompleta não é aceita. |
| Escolher um dia fora de Data mínima e máxima | O dia aparece apagado e não pode ser clicado. |
| No período, clicar num atalho | As duas datas preenchem e o campo mostra o intervalo. |
| Salvar com um campo obrigatório vazio | O aviso aponta o campo — no período, a ponta de início. |
Problemas comuns
A data salva como texto e a lista mostra qualquer coisa
A Máscara de exibição foi trocada. Volte para dd/mm/yyyy e mude só a Máscara do banco.
Digitei a data pela metade e ela sumiu
É assim que o campo funciona: data incompleta é apagada ao sair do campo. Digite os oito números ou escolha no calendário.
O valor padrão de hoje não aparecia no campo
Em versões anteriores o valor padrão dos campos de data e hora era ignorado. Abra a tela, salve de novo e republique o projeto.
O Hoje do calendário e o Hoje do valor padrão são dias diferentes
Perto da meia-noite, o servidor e o navegador podem estar em dias diferentes. Se a data exata importa, deixe a pessoa escolher no calendário em vez de preencher sozinho.
O campo de hora aparece diferente em cada computador
É o relógio do próprio navegador. Não há como padronizar a aparência; o valor gravado é o mesmo.
O calendário continua em português com o sistema em outro idioma
Os nomes dos meses e os botões do calendário são fixos em português nesta versão.
Referência: painel × código
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados. As máscaras se escrevem com sublinhado, como o painel grava.
| No painel | No código | Padrão |
|---|---|---|
| Nome | name | — |
| Label | label | — |
| Obrigatório | required | — |
| Valor padrão | value | — |
| Data mínima · Data máxima | min · max | — |
| Somente leitura | readonly | — |
| Dica | hint | — |
| Máscara de exibição | display_mask | dd/mm/yyyy |
| Máscara do banco | database_mask | yyyy-mm-dd |
| Direção do popup | opens | left |
| Largura | width | — |
| On Change | mad:change | — |
| Nome (início) · Nome (fim) | name_start · name_end | — |
| Valor padrão (início) · Valor padrão (fim) | default_start · default_end | — |
| Placeholder (do período) | placeholder | Selecione o período |
| Limpável | clearable | ligado |
| Presets padrão | presets | — |
| Intervalo máximo (dias) | max_span | sem limite |
| Desabilitado (do período) | disabled | — |
| Tamanho · Variante · Alinhamento Popover (do filtro de mês/ano) | size · variant · popover-align | — |