Date Picker

Documentation de cbk-toolkit

DatePicker

Sélecteur de date basé sur l'input natif type="date"avec ref forwarding et style homogène aux autres composants de formulaire.

Démo en direct — sélection de dates
jj/mm/aaaa
jj/mm/aaaa
Le DatePicker s’appuie sur le sélecteur natif du navigateur.
Code source complet — copier-coller

Exemple d'un champ date avec label.

"use client";

import { useState } from "react";
import { DatePicker } from "@ramses1er/cbk-toolkit/client";

export default function DateRange() {
  const [startDate, setStartDate] = useState("");

  return (
    <div>
      <label className="font-semibold text-gray-600 block">
        Date de début
      </label>
      <DatePicker
        value={startDate}
        onChange={(e) => setStartDate(e.target.value)}
      />
    </div>
  );
}
Utilisation — avec FieldContainer et Label

Pattern standard : combiner FieldContainer , Label et DatePicker .

import { FieldContainer, Label, DatePicker } from "@ramses1er/cbk-toolkit/client";

<FieldContainer>
  <Label>Date de début</Label>
  <DatePicker
    value={form.startDate}
    onChange={(e) => setForm({ ...form, startDate: e.target.value })}
  />
</FieldContainer>
Props
PropTypeDéfautDescription
refReact.Ref<HTMLInputElement>—Ref forwarding vers l'élément <input> natif
...propsInputHTMLAttributes—Toutes les props HTML natives (value, onChange, min, max, disabled, etc.)
Comportement
  • Utilise l'input natif type="date" du navigateur
  • Supporte le ref forwardingpour un accès direct au DOM
  • Les classes de base incluent le focus ring, les bordures arrondies et la transition
  • Style homogène avec les autres composants de formulaire (Input, Select, TextArea)
  • Supporte les props min et max pour contraindre la plage de dates