Özel Altbilgi

Kendi düğmeleriniz ve düzeninizle tamamen özel bir altbilgi oluşturun veya minimal bir seçici için bölümleri tamamen kaldırın.

Yeniden Düzenlenmiş Altbilgi

Altbilgi düğmelerini yeniden düzenleyin veya TodayButton gibi yenilerini ekleyin. DateTimePicker bileşik bileşeni, zaman seçimi için TimePanel içeren bir TimeSection içerir ve Footer, eylem düğmeleri için bir kapsayıcı görevi görür.

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>
  );
}

Ayrıca yerleşik eylem düğmelerini tamamen atlayabilir ve kendi öğelerinizi Footer içinde kullanabilirsiniz:

<DatePicker.Footer>
  <button onClick={() => setValue(new Date())}>Bugünü Ayarla</button>
  <button onClick={() => setValue(null)}>Temizle</button>
</DatePicker.Footer>

Minimal Düzen

İhtiyaç duymadığınız bölümleri atlayın. Örneğin, altbilgisi veya tetikleyicisi olmayan, başlıksız bir satır içi takvim:

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>
  );
}

Veya altbilgisiz bir seçici:

<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>

Özel Sınıf Adları Ekleme

Her bir bileşen parçası, varsayılan stillendirilmiş CSS sınıflarıyla birleşen bir className prop’u kabul eder:

<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>