Seletor de data

"use client"

import * as React from "react"

O date picker não é um primitivo único — ele compõe os componentes Popover e Calendar, com o react-day-picker cuidando da grade do calendário, tudo estilizado seguindo a receita neobrutalista: bordas grossas, sombras duras e tipografia em negrito.

Use quando:

• Reservas e agendamentos — intervalos de check-in/check-out, horários de atendimento, datas de entrega.
• Campos de formulário — data de nascimento, prazos, datas de início; combine com um input para digitação direta.
• Filtros de dashboard — seleção de intervalo de datas sobre análises, pedidos e relatórios.

Instalação#

O seletor de data é construído por meio de uma composição dos componentes <Popover /> e <Calendar />.

Consulte as instruções de instalação dos componentes Popover e Calendar.

Uso#

Copiar"use client"
 
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            data-empty={!date}
            className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
          />
        }
      >
        <CalendarIcon />
        {date ? format(date, "PPP") : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

Consulte a documentação do React DayPicker para obter mais informações.

Composição#

Um seletor de data é construído a partir de Popover e Calendar (não existe um componente raiz DatePicker):

CopiarPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Exemplos#

Básico#

Um seletor de data básico.

"use client"

import * as React from "react"

Seletor de intervalo#

Um seletor de data para escolher um intervalo de datas.

"use client"

import * as React from "react"

Data de nascimento#

Um seletor de data para escolher uma data de nascimento. Este componente inclui um layout de cabeçalho com menus suspensos para selecionar a data e o mês.

"use client"

import * as React from "react"

Campo de entrada#

Um seletor de data com um campo de entrada para escolher uma data.

"use client"

import * as React from "react"

Seletor de hora#

Um seletor de data com um campo de entrada de hora para escolher um horário.

"use client"

import * as React from "react"

Seletor em linguagem natural#

Este componente usa a biblioteca chrono-node para analisar datas em linguagem natural.

"use client"

import * as React from "react"

RTL#

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade#

A composição segue o exemplo Date Picker Dialog do WAI-ARIA: o Popover conecta o gatilho com aria-expanded e aria-controls e devolve o foco ao fechar, enquanto o react-day-picker renderiza o mês como um grid de células de dia rotuladas com tabindex itinerante (roving).

Interações de teclado: