---
title: "Date Range Picker"
description: "Hazır aralıklar, iki aylık takvim ve Uygula/Temizle ile tarih aralığı seçtirir."
---

<Callout type="info" title="Ne zaman kullanılır">
Rapor ve analitik ekranlarındaki dönem filtresi, kampanya geçerlilik tarihleri. Sabit 7/30/90 gün seçimi yetiyorsa [Segmented Control](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/segmented-control) daha sade kalır.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/date-range-picker
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. [Calendar](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/calendar), Popover ve Button da birlikte kurulur.

## Örnekler

### Hazır aralıklar

Varsayılan liste: Bugün, Son 7 gün, Son 30 gün, Bu ay, Geçen ay. Değer yalnızca Uygula ile değişir; popover kapanırsa taslak atılır. Mobilde tek ay gösterilir, hazır aralıklar yatay kayar.

**Örnek: Hazır aralıklar** (`date-range-picker/presets`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/date-range-picker/presets)

```tsx
import * as React from "react"
import type { DateRange } from "react-day-picker"

import { DateRangePicker } from "@/components/ikas/date-range-picker"

export default function DateRangePickerPresets() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2026, 9, 1),
    to: new Date(2026, 9, 8),
  })

  return <DateRangePicker value={range} onValueChange={setRange} />
}
```

### Form içinde

presets ile kendi listenizi verin. Her aralık bugünün tarihinden hesaplanır. minDate geçmiş günleri kapatır.

**Örnek: Form içinde** (`date-range-picker/form`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/date-range-picker/form)

```tsx
import * as React from "react"
import { addDays } from "date-fns"
import type { DateRange } from "react-day-picker"

import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { DateRangePicker, type DateRangePreset } from "@/components/ikas/date-range-picker"

const nextSaturday = (today: Date) => addDays(today, (6 - today.getDay() + 7) % 7)

/** Campaign window: future dates only, presets that count forward from today. */
const presets: DateRangePreset[] = [
  { label: "Hafta sonu", range: (today) => ({ from: nextSaturday(today), to: addDays(nextSaturday(today), 1) }) },
  { label: "Önümüzdeki 7 gün", range: (today) => ({ from: today, to: addDays(today, 6) }) },
  { label: "Önümüzdeki 30 gün", range: (today) => ({ from: today, to: addDays(today, 29) }) },
]

export default function DateRangePickerForm() {
  const [range, setRange] = React.useState<DateRange>()

  return (
    <form className="w-full max-w-sm" onSubmit={(event) => event.preventDefault()}>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="campaign-title">Kampanya adı</FieldLabel>
          <Input id="campaign-title" defaultValue="Kış indirimi" />
        </Field>
        <Field>
          <FieldLabel htmlFor="campaign-dates">Geçerlilik tarihleri</FieldLabel>
          <DateRangePicker
            id="campaign-dates"
            className="sm:w-full"
            value={range}
            onValueChange={setRange}
            presets={presets}
            minDate={new Date(2026, 9, 9)}
          />
          <FieldDescription>Kampanya bu tarihler arasında mağazada görünür.</FieldDescription>
        </Field>
        <Button type="submit" className="self-start" disabled={!range?.from}>
          Kaydet
        </Button>
      </FieldGroup>
    </form>
  )
}
```

Gerçek bir ekranda: [Analitik](https://builders.ikas.com/tr/docs/app-development/ui-kit/examples/analytics) örneği dönemi bu bileşenle seçer.

## Kullanım ilkeleri

**Yapın:**

- Filtrede en sık kullanılan aralıkları preset olarak verin.
- Dönem filtresini PageHeader actions içine koyun.

**Yapmayın:**

- Uygula olmadan veriyi yeniden yüklemeyin; değer zaten yalnızca Uygula ile değişir.
- Beşten fazla preset eklemeyin.

## API

### `DateRangePicker`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` | `DateRange` | - | Uygulanmış aralık. Kontrolsüz kullanım için defaultValue verin. |
| `defaultValue` | `DateRange` | - | Kontrolsüz kullanımda ilk aralık. |
| `onValueChange` | `(value: DateRange \| undefined) => void` | - | Uygula'da yeni aralıkla, Temizle'de undefined ile çağrılır. |
| `presets` | `DateRangePreset[]` | `dateRangePresets` | Takvimin yanındaki hazır aralıklar. Gizlemek için [] verin. |
| `minDate` | `Date` | - | Seçilebilen en erken gün. |
| `maxDate` | `Date` | - | Seçilebilen en geç gün. |
| `disabled` | `boolean` | `false` | Butonu devre dışı bırakır. |
| `placeholder` | `string` | `"Tarih aralığı seçin"` | Aralık seçilmemişken butondaki metin. |
| `dateFormat` | `string` | `"dd.MM.yyyy"` | Her iki ucun biçimi, date-fns format dizesi. |
| `align` | `"start" \| "center" \| "end"` | `"start"` | Popover'ın butona göre hizası. |
| `className` | `string` | - | Buton için sınıflar. |
| `id` | `string` | - | Butonun id'si, FieldLabel htmlFor için. |
| `aria-invalid` | `boolean` | - | Field içinde hatalı durumu gösterir. |

### `DateRangePreset`

| Alan | Tip | Açıklama |
| --- | --- | --- |
| `label` | `string` | Butondaki metin. |
| `range` | `(today: Date) => DateRange` | Seçildiğinde bugünden aralığı üretir. |

Varsayılan liste `dateRangePresets` olarak dışa açıktır; genişletmek için `[...dateRangePresets, { ... }]` kullanın.