# DatePicker

Campo de data: da para digitar e da para escolher no calendário.

Digitar vem primeiro de propósito. Quem preenche formulário o dia inteiro digita
`03032026` mais rápido do que navega três meses para trás.

Texto pela metade não vira data, e ao sair do campo o que não virou data volta
para a última valida. `31/02` não vira 3 de marco.

Com `confirm`, o clique no dia vira rascunho e só o Aplicar escreve o valor. No
celular o painel vira folha de baixo, pelo `CalendarPanel`.

## Data e texto

O valor é um `Date`, e não texto. As três funções que fazem a ponte saem pelo
pacote, porque a tela que mostra data fora de um campo precisa das mesmas
regras:

| Função | O que faz |
|---|---|
| `formatDate(data)` | `Date` para `dd/mm/aaaa`, e string vazia quando não há data |
| `parseDate(texto)` | `dd/mm/aaaa` para `Date`, e `undefined` para o que não é data |
| `applyDateMask(texto)` | A máscara enquanto se digita: põe as barras e para em oito dígitos |

`parseDate` devolve `undefined` para data que não existe. `31/02/2026` não vira
3 de março, que é o que o `new Date` faria sozinho e é a origem de metade dos
vencimentos errados de um sistema de nota fiscal.

Tudo aqui trabalha na data local do navegador de propósito: a pessoa escolheu
"3 de março" no calendário da tela dela, e não um instante em UTC.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `DatePicker` - abre a folha com o mês; guarda ISO e exibe `dd/mm/aaaa`. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { DatePicker } from '@rivocode/ui'
```

## Exemplos

### Com rótulo

```tsx
import { DatePicker, Field, FieldLabel } from '@rivocode/ui'

export function WithLabel() {
  return (
    <Field className="w-64">
      <FieldLabel htmlFor="vencimento">Vencimento</FieldLabel>
      <DatePicker id="vencimento" defaultValue={new Date(2026, 2, 3)} />
    </Field>
  )
}
```

### Vazio

```tsx
import { DatePicker, Field, FieldLabel } from '@rivocode/ui'

export function Empty() {
  return <DatePicker aria-label="Data" className="w-64" />
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `confirm` | `boolean` |  | 0.5.0 | Sem rodape, o clique no dia ja vale e o painel fecha. |
| `defaultValue` | `Date` |  | 0.4.0 | A data inicial, quando o componente controla o proprio estado. |
| `disabledDays` | `Matcher[] \| Matcher` |  | 0.4.0 | Dias que nao podem ser escolhidos. |
| `endMonth` | `Date` |  | 0.4.0 | The latest month to end the month navigation. |
| `locale` | `Partial<DayPickerLocale>` |  | 0.4.0 | The locale object used to localize dates. |
| `onValueChange` | `((date: Date \| undefined) => void)` |  | 0.4.0 | Chamado quando a data muda, pela digitacao ou pelo Aplicar. |
| `render` | `ComponentRenderFn<HTMLProps, FieldControlState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `showOutsideDays` | `boolean` |  | 0.4.0 | Show the outside days (days falling in the next or the previous month). |
| `size` | `"lg" \| "md" \| "sm"` |  | 0.4.0 | Tamanho do campo, o mesmo vocabulario do Input. |
| `startMonth` | `Date` |  | 0.4.0 | The earliest month to start the month navigation. |
| `value` | `Date` |  | 0.4.0 | A data escolhida, quando quem usa controla o estado. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)