DatePicker
Tipo: Core
- DesignersFigmaAinda não disponível
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
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 |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-date-time-picker
Os seletores de data e hora permitem que os usuários selecionem uma única data ou um intervalo de datas e horas
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
— |
fromUtcValue |
boolean |
false |
Data em UTC |
variant |
MdsDateTimePickerVariants |
'default' |
Variante do campo |
size |
MdsSizes |
'md' |
tamanho do campo |
mode |
MdsDateTimePickerModes |
'single' |
Modo do seletor |
disabled |
boolean |
false |
desativa o campo |
timePicker |
boolean |
false |
Habilita o time picker |
timeRequired |
boolean |
true |
Horário obrigatório |
label |
string |
null |
Label do campo |
placeholder |
string |
'' |
Placeholder do campo |
help |
string |
null |
Texto de ajuda |
readonly |
boolean |
false |
Somente leitura |
required |
boolean |
false |
Campo obrigatório |
msgErrorRequired |
string |
'Campo obrigatório' |
Mensagem de validação de campo obrigatório |
drops |
MdsDateTimePickerDrops |
"down" |
— |
opens |
MdsDateTimePickerOpens |
"center" |
— |
placement |
MdsPlacement |
'bottom' |
— |
minDate |
Date |
null |
Data mínima - moment |
maxDate |
Date |
null |
Data máxima - moment |
replaceInvalidDate |
boolean |
false |
— |
futureRanges |
boolean |
false |
Exibe ranges futuros |
showRanges |
boolean |
true |
Mostra o seletor de ranges fixos |
highlightDates |
Date[] |
[] |
— |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onBlur |
FocusEvent |
— |
onFocus |
FocusEvent |
— |
onChange |
void |
— |
dateViewChanged |
void |
— |