DatePicker
- Angular:
mds-date-time-picker - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O DatePicker permite ao usuário selecionar uma data específica ou um intervalo de datas através de uma interface de calendário. Ele garante que a entrada de dados siga o formato correto do sistema, facilitando o agendamento e a consulta de registros temporais.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Formatos de Data: Utilize o formato padrão regional (DD/MM/AAAA). O campo deve ser preenchido automaticamente ao selecionar no calendário.
- Seleção de Período (Range): Para relatórios ou filtros de viagem, utilize a variação que permite selecionar “Data Inicial” e “Data Final” em um único fluxo.
- Datas Relativas: Sempre que possível, ofereça atalhos para períodos comuns (ex: Hoje, Ontem, Últimos 7 dias). Isso acelera a operação em dashboards.
- Rótulos (Labels): Devem ser claros sobre qual data está sendo solicitada. Use Caixa de Sentença.
- Certo: Data de embarque ou Previsão de entrega
- Restrições: Desabilite datas que não fazem sentido para o contexto (ex: impedir a seleção de datas retroativas para um agendamento futuro).
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Filtro de Relatório | Escolha o período que deseja ver… | Período |
| Agendamento | Data prevista para a chegada da carga | Previsão de chegada |
| Atalhos | Ver dados referentes ao dia de hoje | Hoje |