İçeriğe geç
BigBang

Sık açılanlar

    ↑↓Gezin↵AçEscKapat
    EN

    Bileşenler

    DatePicker

    Gün, ay ve yıl parçalarına yazılan ya da açılır takvimden seçilen tarih alanı.

    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”

    Parçalar Provider dilinin sırasındadır (Türkçede gg.aa.yyyy). Takvim düğmesi açılır bir ay ızgarası açar.

    GGAAYYYY

    Gün, ay ve yılı yazın ya da takvimden seçin.

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

    export default function Default() {
      return <DatePicker label="Tarih" description="Gün, ay ve yılı yazın ya da takvimden seçin." className="max-w-xs" />;
    }

    Durumlar

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

    Dolu, zorunlu ve hatalı, aralık dışı (yerleşik mesaj), salt okunur ve devre dışı.

    28102026
    GGAAYYYY
    Bir tarih seçin.
    05012026
    1 Şubat 2026 veya sonrasında bir tarih seçin
    28102026
    28102026
    import { DatePicker, parseDate } from '@bigbang/ui';
    

    export default function States() {
      return (
        <div className="flex max-w-xs flex-col gap-lg">
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} />
          <DatePicker label="Tarih" error="Bir tarih seçin." required />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-01-05')} min={parseDate('2026-02-01')} />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} readOnly />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} disabled />
        </div>
      );
    }

    Kontrollü

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

    Değer CalendarDate ya da null; formla YYYY-MM-DD gider.

    28102026
    2026-10-28
    import { DatePicker, parseDate, type CalendarDate } from '@bigbang/ui';
    import { useState } from 'react';
    

    export default function Controlled() {
      const [value, setValue] = useState<CalendarDate | null>(() => parseDate('2026-10-28'));
      return (
        <div className="flex max-w-xs flex-col gap-sm">
          <DatePicker label="Tarih" value={value} onValueChange={setValue} max={parseDate('2026-12-31')} />
          <output className="type-body-sm text-fg-subtle tabular-nums">{value?.toString() ?? '—'}</output>
        </div>
      );
    }

    Açık ve koyu mod

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

    Odaktaki parça birincil dolgu alır.

    28102026
    GGAAYYYY
    Bir tarih seçin.
    05012026
    1 Şubat 2026 veya sonrasında bir tarih seçin
    28102026
    28102026
    28102026
    GGAAYYYY
    Bir tarih seçin.
    05012026
    1 Şubat 2026 veya sonrasında bir tarih seçin
    28102026
    28102026
    import { DatePicker, parseDate } from '@bigbang/ui';
    

    export default function States() {
      return (
        <div className="flex max-w-xs flex-col gap-lg">
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} />
          <DatePicker label="Tarih" error="Bir tarih seçin." required />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-01-05')} min={parseDate('2026-02-01')} />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} readOnly />
          <DatePicker label="Tarih" defaultValue={parseDate('2026-10-28')} disabled />
        </div>
      );
    }