Date Picker
Seletor de data com trigger estilo Select e calendário em popover. Aceita locale customizado e função de disable.
Utilização
index.tsx
import { DatePicker } from "@convertcompany/ui";
O DatePicker é uma composição opinada de Popover + Button-styled-trigger + Calendar. O trigger visualmente segue o mesmo padrão de Select (FIELD.container, com ícone de calendário à direita).
Exemplos
Locale pt-BR
Locale dupla função: localiza o Calendar interno (nomes de meses/dias) e o Intl.DateTimeFormat do trigger.
Formato compacto (DD/MM/AAAA)
Sobrescreva formatOptions para mudar o display do trigger.
Ou passe uma função format customizada (tem prioridade sobre formatOptions):
index.tsx
<DatePicker value={date} onChange={setDate} format={(d) => d.toISOString().slice(0, 10)} />
Desabilitando datas passadas
Aceita função (date: Date) => boolean, objeto matcher ou array de matchers.
Outros matchers úteis:
index.tsx
// fins de semana
<DatePicker disabled={{ dayOfWeek: [0, 6] }} />
// range específico
<DatePicker disabled={{ from: new Date(2026, 0, 1), to: new Date(2026, 11, 31) }} />
// trigger inteiro
<DatePicker disabled />
Alinhamento do popover
Por default, o popover abre alinhado ao início (align="start"). Em layouts à direita, use align="end".
Props
| Propriedade | Tipo |
|---|---|
| valueData selecionada. | Date |
| onChangeCallback de seleção. Passa undefined quando o usuário limpa. | (date: Date | undefined) => void |
| placeholderTexto quando nenhuma data está selecionada. Default: "Selecione uma data". | string |
| disabledtrue desabilita o trigger. Função ou matcher é passado ao Calendar. | boolean Matcher Matcher[] |
| formatFunção customizada de formatação. Tem prioridade sobre formatOptions/locale. | (date: Date) => string |
| formatOptionsOptions passadas ao Intl.DateTimeFormat. Default: { dateStyle: 'long' }. | Intl.DateTimeFormatOptions |
| localeLocale do date-fns (ptBR, enUS, etc). Aplica no Calendar e no Intl formatter. | DayPickerLocale |
| alignAlinhamento do popover relativo ao trigger. | start center end |
| triggerPropsProps extra para o botão trigger. | Omit<ButtonHTMLAttributes, 'onClick' | 'children' | 'disabled'> |
| calendarPropsProps extra para o Calendar interno. | Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disabled' | 'locale'> |
| classNameClasse CSS adicional para o trigger. | string |