İçeriğe geç
BigBang

Sık açılanlar

    ↑↓Gezin↵AçEscKapat
    EN

    Bileşenler

    DateRangePicker

    Başlangıç ve bitiş parçalarına yazılan ya da hazır aralıklar ve iki aylık takvimle seçilen tarih aralığı.

    Storybook
    Storybook
    Kaynak kod
    Kaynak kod

    Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

    Canlı örnek, StorybookStorybook'ta aç

    Varsayılan

    Bölüm başlığı “Varsayılan”

    Hazır aralıklar takvimin yanında durur. Geniş ekranda iki ay, 1024 px altında bir ay gösterilir.

    Başlangıç tarihiBitiş tarihi
    GGAAYYYY
    GGAAYYYY

    Başlangıç ve bitiş günlerini yazın ya da takvimden seçin.

    import { DateRangePicker } from '@bigbang/ui';
    

    export default function Default() {
      return <DateRangePicker label="Tarih aralığı" description="Başlangıç ve bitiş günlerini yazın ya da takvimden seçin." className="max-w-sm" />;
    }

    Onaylı uygulama

    Bölüm başlığı “Onaylı uygulama”

    apply="confirm" Uygula ve Vazgeç düğmelerini ekler; maxRangeDays uzun aralıkları ve uzun hazır aralıkları kapatır.

    Başlangıç tarihiBitiş tarihi
    GGAAYYYY
    GGAAYYYY
    import { DateRangePicker, parseDate } from '@bigbang/ui';
    

    export default function Confirm() {
      return (
        <DateRangePicker
          label="Tarih aralığı"
          apply="confirm"
          maxRangeDays={31}
          min={parseDate('2026-01-01')}
          max={parseDate('2026-12-31')}
          className="max-w-sm"
        />
      );
    }

    Durumlar

    Bölüm başlığı “Durumlar”

    Dolu, ters sıralı ve çok uzun (yerleşik mesajlar), zorunlu ve hatalı, devre dışı.

    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    Başlangıç tarihiBitiş tarihi
    15102026
    01102026
    Bitiş tarihi başlangıçtan önce olamaz
    Başlangıç tarihiBitiş tarihi
    01092026
    28102026
    Aralık en fazla 31 gün olabilir
    Başlangıç tarihiBitiş tarihi
    GGAAYYYY
    GGAAYYYY
    Bir aralık seçin.
    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    import { DateRangePicker, parseDate } from '@bigbang/ui';
    

    const range = (start: string, end: string) => ({ start: parseDate(start), end: parseDate(end) });
    

    export default function States() {
      return (
        <div className="flex max-w-sm flex-col gap-lg">
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-01', '2026-10-15')} />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-15', '2026-10-01')} />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-09-01', '2026-10-28')} maxRangeDays={31} />
          <DateRangePicker label="Tarih aralığı" error="Bir aralık seçin." required />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-01', '2026-10-15')} disabled />
        </div>
      );
    }

    Kontrollü

    Bölüm başlığı “Kontrollü”

    Değer { start, end } ya da null; presets dizisi hazır aralıkları seçer ve sıralar.

    Başlangıç tarihiBitiş tarihi
    01102026
    28102026
    2026-10-01 – 2026-10-28
    import { DateRangePicker, parseDate, type DateRange } from '@bigbang/ui';
    import { useState } from 'react';
    

    export default function Controlled() {
      const [value, setValue] = useState<DateRange | null>(() => ({ start: parseDate('2026-10-01'), end: parseDate('2026-10-28') }));
      return (
        <div className="flex max-w-sm flex-col gap-sm">
          <DateRangePicker label="Tarih aralığı" value={value} onValueChange={setValue} presets={['last7Days', 'thisMonth', 'lastMonth']} />
          <output className="type-body-sm text-fg-subtle tabular-nums">{value ? `${value.start.toString()} – ${value.end.toString()}` : '—'}</output>
        </div>
      );
    }

    Açık ve koyu mod

    Bölüm başlığı “Açık ve koyu mod”

    Aralığın uçları birincil dolgu, arası seçili yüzey rengi alır.

    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    Başlangıç tarihiBitiş tarihi
    15102026
    01102026
    Bitiş tarihi başlangıçtan önce olamaz
    Başlangıç tarihiBitiş tarihi
    01092026
    28102026
    Aralık en fazla 31 gün olabilir
    Başlangıç tarihiBitiş tarihi
    GGAAYYYY
    GGAAYYYY
    Bir aralık seçin.
    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    Başlangıç tarihiBitiş tarihi
    15102026
    01102026
    Bitiş tarihi başlangıçtan önce olamaz
    Başlangıç tarihiBitiş tarihi
    01092026
    28102026
    Aralık en fazla 31 gün olabilir
    Başlangıç tarihiBitiş tarihi
    GGAAYYYY
    GGAAYYYY
    Bir aralık seçin.
    Başlangıç tarihiBitiş tarihi
    01102026
    15102026
    import { DateRangePicker, parseDate } from '@bigbang/ui';
    

    const range = (start: string, end: string) => ({ start: parseDate(start), end: parseDate(end) });
    

    export default function States() {
      return (
        <div className="flex max-w-sm flex-col gap-lg">
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-01', '2026-10-15')} />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-15', '2026-10-01')} />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-09-01', '2026-10-28')} maxRangeDays={31} />
          <DateRangePicker label="Tarih aralığı" error="Bir aralık seçin." required />
          <DateRangePicker label="Tarih aralığı" defaultValue={range('2026-10-01', '2026-10-15')} disabled />
        </div>
      );
    }