DateRangePicker

Ne zaman kullanılır

DateRangePicker bir başlangıç ve bitiş tarihi gereken yerler içindir: rapor dönemi, liste filtresi, izin aralığı.

Ne zaman kullanılmaz

• Tek tarih için: DatePicker kullanın.
• Bağımsız iki tarih için: iki tarih birbirine bağlı değilse iki DatePicker daha açıktır.

Anatomi

Tarih aralığı

Başlangıç tarihiBitiş tarihi

GG.AA.YYYY

–

GG.AA.YYYY

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

AçıkKoyu

Kodu kopyala

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" />;
}

1. Etiket: İki parça grubunu birlikte adlandırır.
2. Başlangıç ve bitiş parçaları: Aralarında süs çizgisi.
3. Takvim düğmesi: Açılır pencereyi açar.
4. Hazır aralıklar: Bugün, Dün, Son 7 gün, Bu ay, Geçen ay, Bu yıl, Özel aralık.
5. Takvim: 1024 px ve üstünde iki ay, altında bir ay.
6. Alt çubuk: Yalnızca apply="confirm" ile; Vazgeç ve Uygula.

Davranış

• Takvimde ilk tıklama aralığın bir ucunu sabitler; fare ya da klavye odağı diğer ucu önizler; ikinci tıklama aralığı kapatır. Ters yönde seçmek uçları yer değiştirir.
• instant kipinde takvimde seçilen aralık hemen uygulanır ve pencere kapanır. Hazır aralık da hemen uygulanır ama pencere açık kalır, çünkü radyo grubunda oklar seçerek ilerler.
• confirm kipinde hiçbir şey Uygula’ya kadar değişmez.
• maxRangeDays’i aşan ikinci tıklama yeni bir başlangıç sayılır; daha uzun hazır aralıklar devre dışıdır.
• Ters sıralı, çok uzun ya da min/max dışındaki yazılmış aralıklar yerleşik mesaj alır.

Yönergeler

• Hazır aralıkları kullanıcıların gerçekten seçtiği dönemlerle sınırlayın; presets dizisiyle sıralayın.
• Bugün, Bu ay ve Bu yıl bugüne kadar sayar; geleceği kapsamaz.
• Raporlarda büyük aralıklar yavaşsa maxRangeDays ile sınırlayın ve sınırı açıklamada yazın.

İçerik

Türkçe	İngilizce
Başlangıç tarihi / Bitiş tarihi	Start date / End date
Hazır aralıklar	Preset ranges
Son 7 gün	Last 7 days
Özel aralık	Custom range
Uygula / Vazgeç	Apply / Cancel
Aralık en fazla {days} gün olabilir	The range can be at most {days} days
Bitiş tarihi başlangıçtan önce olamaz	The end date cannot be before the start

İlgili bileşenler

• DatePicker: Tek tarih.
• Calendar: Açık duran takvim.