Visão geral

O DatePicker abre um Calendar em um Popover ao clicar no campo. Exibe a data selecionada formatada em pt-BR.

Demo básica

Selecionado: nenhum

Import

import { DatePicker } from "@/components/date-picker"

Composição

O DatePicker é um componente customizado em /components/date-picker.tsx que compõe Calendar, Popover e Button. O formato de exibição usa date-fns com locale pt-BR.

Variações

Exemplos de configurações comuns do DatePicker.

Datas passadas desabilitadas

Útil para agendamentos e reservas.

Padrão de implementação

Como usar o DatePicker em formulários e contextos controlados.

Uso básico

"use client"
import { useState } from "react"
import { DatePicker } from "@/components/date-picker"

export function FormComData() {
  const [data, setData] = useState<Date | undefined>()

  return (
    <DatePicker
      date={data}
      onDateChange={setData}
      placeholder="Selecionar data de vencimento"
    />
  )
}

Com datas passadas desabilitadas

<DatePicker
  date={data}
  onDateChange={setData}
  disabledDates={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
/>

Com largura customizada

<DatePicker
  date={data}
  onDateChange={setData}
  className="w-full"
/>

Props e uso

API do componente DatePicker customizado.

Props

date

Date | undefined

Data atualmente selecionada (estado controlado).

onDateChange

(date: Date | undefined) => void

Callback chamado ao selecionar uma data.

placeholder

string

Texto exibido quando nenhuma data está selecionada.

disabled

boolean

Desabilita o campo inteiro.

disabledDates

(date: Date) => boolean

Função que recebe uma data e retorna true para desabilitá-la.

className

string

Classes do botão trigger. Use w-full para preencher o container.

Acessibilidade

O trigger é um Button com aria-expanded gerenciado pelo Popover.

O Calendar dentro do Popover herda navegação completa por teclado do react-day-picker.

Para campos de formulário, associe com um label externo e use o id do trigger para associação correta.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter