Selettore data

"use client"

import * as React from "react"

Il date picker non è una singola primitiva — compone i componenti Popover e Calendar, con react-day-picker a gestire la griglia del calendario, rifiniti secondo la ricetta neobrutalista: bordi spessi, ombre nette e tipografia in grassetto.

Quando usarlo:

• Prenotazioni e pianificazione — intervalli check-in/check-out, slot per appuntamenti, date di consegna.
• Campi di modulo — data di nascita, scadenze, date di inizio; abbinalo a un input per l’inserimento digitato.
• Filtri per dashboard — selezione di intervalli di date su analisi, ordini e report.

Installazione#

Il Date Picker è costruito usando una composizione dei componenti <Popover /> e <Calendar />.

Consulta le istruzioni di installazione dei componenti Popover e Calendar.

Utilizzo#

Copia"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>
  )
}

Consulta la documentazione di React DayPicker per maggiori informazioni.

Composizione#

Un date picker è costruito da Popover e Calendar (non esiste un componente root DatePicker):

CopiaPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Esempi#

Base#

Un componente base per la selezione della data.

"use client"

import * as React from "react"

Selettore di intervallo#

Un componente per selezionare un intervallo di date.

"use client"

import * as React from "react"

Data di nascita#

Un componente per selezionare una data di nascita. Questo componente include un layout dell'intestazione con menu a discesa per la selezione della data e del mese.

"use client"

import * as React from "react"

Campo di input#

Un componente per la selezione della data con un campo di input per scegliere una data.

"use client"

import * as React from "react"

Selettore dell'ora#

Un componente per la selezione della data con un campo di input dell'ora per scegliere un orario.

"use client"

import * as React from "react"

Selettore in linguaggio naturale#

Questo componente usa la libreria chrono-node per analizzare le date in linguaggio naturale.

"use client"

import * as React from "react"

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

La composizione segue l’esempio WAI-ARIA Date Picker Dialog: il Popover collega il trigger con aria-expanded e aria-controls e restituisce il focus alla chiusura, mentre react-day-picker rende il mese come grid di celle-giorno etichettate con un roving tabindex.

Interazioni da tastiera: