Pied de page personnalisé

Créez un pied de page entièrement personnalisé avec vos propres boutons et votre propre mise en page, ou supprimez des parties entières pour un sélecteur minimal.

Pied de page réorganisé

Réorganisez les boutons du pied de page ou ajoutez-en de nouveaux comme TodayButton. Le composant composé DateTimePicker inclut une TimeSection avec TimePanel pour la sélection de l’heure, et le Footer agit comme un conteneur pour les boutons d’action.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CompoundCustomFooter() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker.Root value={value} onChange={setValue}>
      <DateTimePicker.Trigger />
      <DateTimePicker.Content>
        <DateTimePicker.Header>
          <DateTimePicker.PrevButton />
          <DateTimePicker.Title />
          <DateTimePicker.NextButton />
        </DateTimePicker.Header>
        <DateTimePicker.Grid />
        <DateTimePicker.TimeSection>
          <DateTimePicker.TimePanel target="single" />
        </DateTimePicker.TimeSection>
        <DateTimePicker.Footer>
          <DateTimePicker.TodayButton />
          <div style={{ flex: 1 }} />
          <DateTimePicker.CancelButton />
          <DateTimePicker.ConfirmButton />
        </DateTimePicker.Footer>
      </DateTimePicker.Content>
    </DateTimePicker.Root>
  );
}

Vous pouvez également ignorer complètement les boutons d’action intégrés et utiliser vos propres éléments à l’intérieur de Footer :

<DatePicker.Footer>
  <button onClick={() => setValue(new Date())}>Set Today</button>
  <button onClick={() => setValue(null)}>Clear</button>
</DatePicker.Footer>

Mise en page minimale

Omettez toutes les parties dont vous n’avez pas besoin. Par exemple, un calendrier en ligne sans en-tête, sans pied de page ni déclencheur :

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function CompoundNoFooter() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Title />
          <DatePicker.NextButton />
        </DatePicker.Header>
        <DatePicker.Grid />
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Ou un sélecteur sans le pied de page :

<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
  </DatePicker.Content>
</DatePicker.Root>

Ajout de noms de classe personnalisés

Chaque partie du composant composé accepte une prop className qui fusionne avec les classes CSS stylées par défaut :

<DatePicker.Root value={value} onChange={setValue} className="my-picker">
  <DatePicker.Trigger className="my-trigger" />
  <DatePicker.Content className="my-content">
    <DatePicker.Header className="my-header">
      <DatePicker.PrevButton className="my-nav" />
      <DatePicker.Title className="my-title" />
      <DatePicker.NextButton className="my-nav" />
    </DatePicker.Header>
    <DatePicker.Grid className="my-grid" />
  </DatePicker.Content>
</DatePicker.Root>