Sélecteur de date

"use client"

import * as React from "react"

Le sélecteur de date n’est pas une primitive unique — il compose les composants Popover et Calendar, react-day-picker prenant en charge la grille du calendrier, le tout habillé du style néobrutaliste : bordures épaisses, ombres marquées et typographie affirmée.

À privilégier pour :

• Réservations et planification — plages arrivée/départ, créneaux de rendez-vous, dates de livraison.
• Champs de formulaire — date de naissance, échéances, dates de début ; associez-le à un champ pour la saisie au clavier.
• Filtres de tableau de bord — sélection de plages de dates sur les analyses, les commandes et les rapports.

Installation#

Le sélecteur de date repose sur une composition des composants <Popover /> et <Calendar />.

Consultez les instructions d’installation des composants Popover et Calendar.

Utilisation#

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

Consultez la documentation React DayPicker pour en savoir plus.

Composition#

Un sélecteur de date se construit à partir de Popover et Calendar (il n’existe pas de composant racine DatePicker) :

CopierPopover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

Exemples#

Simple#

Un sélecteur de date simple.

"use client"

import * as React from "react"

Sélecteur de plage#

Un sélecteur de date permettant de choisir une plage de dates.

"use client"

import * as React from "react"

Date de naissance#

Un sélecteur de date pour choisir une date de naissance. Ce composant inclut une disposition d’en-tête avec menus déroulants pour la sélection de la date et du mois.

"use client"

import * as React from "react"

Champ de saisie#

Un sélecteur de date doté d’un champ de saisie pour choisir une date.

"use client"

import * as React from "react"

Sélecteur d’heure#

Un sélecteur de date doté d’un champ de saisie pour choisir une heure.

"use client"

import * as React from "react"

Sélecteur en langage naturel#

Ce composant utilise la bibliothèque chrono-node pour analyser les dates en langage naturel.

"use client"

import * as React from "react"

RTL#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

La composition suit l’exemple WAI-ARIA Date Picker Dialog : le Popover câble le déclencheur avec aria-expanded et aria-controls et rend le focus à la fermeture, tandis que react-day-picker rend le mois comme une grid de cellules de jours étiquetées, avec un tabindex itinérant.

Interactions clavier :