---
title: "Date Wheel Picker"
description: "Gün, ay ve yıl çarklarıyla tarih seçtirir. Günler aya göre değişir, minDate ve maxDate dışına çıkılmaz."
---

<Callout type="info" title="Ne zaman kullanılır">
Mobilde ya da [Drawer](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/drawer) içinde tarih: doğum tarihi, teslimat günü. Yıllar arasında hızlı geçmek gerektiğinde takvimden rahattır. Masaüstü formda ve haftanın gününün önemli olduğu seçimlerde [Date Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/date-picker) kullanın.
</Callout>

## Kurulum

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

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. [Wheel Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/wheel-picker) da birlikte kurulur; tarih kütüphanesi gerekmez.

API Date Picker ile aynıdır: value, defaultValue, onValueChange, minDate, maxDate, size, disabled. Ay adları varsayılan olarak Türkçedir.

## Örnekler

### Basit

Ay değişince gün o aya sığdırılır: 31 Mart'tan Nisan'a geçince 30 Nisan olur, Şubat artık yılları hesaba katar. onValueChange tarihi yerel saatle gece yarısı olarak verir.

**Örnek: Basit** (`date-wheel-picker/simple`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/date-wheel-picker/simple)

```tsx
import * as React from "react"

import { DateWheelPicker } from "@/components/ikas/date-wheel-picker"

const long = new Intl.DateTimeFormat("tr-TR", { day: "numeric", month: "long", year: "numeric", weekday: "long" })

export default function DateWheelPickerSimple() {
  const [date, setDate] = React.useState(new Date(2026, 9, 12))

  return (
    <div className="grid w-full max-w-xs gap-3 rounded-xl bg-card p-4 shadow-card">
      <div className="grid gap-0.5">
        <span className="text-sm font-medium">Teslimat tarihi</span>
        <span className="text-sm text-muted-foreground">{long.format(date)}</span>
      </div>
      <DateWheelPicker value={date} onValueChange={setDate} className="sm:w-full" />
    </div>
  )
}
```

### En erken ve en geç tarih

minDate ve maxDate yıl, ay ve gün listelerini sınırlar; dışarıdaki değerler hiç görünmez. monthFormat="short" ay adlarını kısaltır, size="sm" satırları küçültür.

**Örnek: En erken ve en geç tarih** (`date-wheel-picker/min-max`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/date-wheel-picker/min-max)

```tsx
import * as React from "react"

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { DateWheelPicker } from "@/components/ikas/date-wheel-picker"

export default function DateWheelPickerMinMax() {
  const [date, setDate] = React.useState(new Date(2026, 10, 3))

  return (
    <Field className="max-w-xs">
      <FieldLabel id="campaign-end-label">Kampanya bitişi</FieldLabel>
      <DateWheelPicker
        aria-label="Kampanya bitişi"
        value={date}
        onValueChange={setDate}
        minDate={new Date(2026, 9, 12)}
        maxDate={new Date(2026, 11, 31)}
        monthFormat="short"
        size="sm"
      />
      <FieldDescription>12 Ekim ile yıl sonu arasında bir gün seçin.</FieldDescription>
    </Field>
  )
}
```

### Drawer içinde

Mobilde tarihi alttan açılan bir Drawer'da seçtirin. Seçimi taslakta tutun, Kaydet'e basılınca uygulayın; Vazgeç eski tarihi korur. Çarkı sürüklemek Drawer'ı sürüklemez.

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

```tsx
import * as React from "react"
import { CalendarIcon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { DateWheelPicker } from "@/components/ikas/date-wheel-picker"

const short = new Intl.DateTimeFormat("tr-TR", { day: "2-digit", month: "2-digit", year: "numeric" })

export default function DateWheelPickerDrawer() {
  const [open, setOpen] = React.useState(false)
  const [saved, setSaved] = React.useState(new Date(1994, 4, 19))
  const [draft, setDraft] = React.useState(saved)

  return (
    <Drawer
      open={open}
      onOpenChange={(next) => {
        setOpen(next)
        if (next) setDraft(saved)
      }}
    >
      <DrawerTrigger asChild>
        <Button variant="outline" className="w-full justify-start font-normal sm:w-48">
          <CalendarIcon data-icon="inline-start" className="text-icon" />
          <span className="tabular-nums">{short.format(saved)}</span>
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto flex w-full max-w-sm flex-col">
          <DrawerHeader>
            <DrawerTitle>Doğum tarihi</DrawerTitle>
            <DrawerDescription>Müşterinin doğum gününde kampanya kodu gönderilir.</DrawerDescription>
          </DrawerHeader>
          <DrawerBody>
            <DateWheelPicker aria-label="Doğum tarihi" value={draft} onValueChange={setDraft} maxDate={new Date()} className="sm:w-full" />
          </DrawerBody>
          <DrawerFooter className="sm:flex-row sm:justify-end">
            <DrawerClose asChild>
              <Button variant="outline">Vazgeç</Button>
            </DrawerClose>
            <Button
              onClick={() => {
                setSaved(draft)
                setOpen(false)
                toast.success("Doğum tarihi kaydedildi")
              }}
            >
              Kaydet
            </Button>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Geçerli aralığı minDate ve maxDate ile verin; doğum tarihinde maxDate bugün olsun.
- Drawer içinde seçimi taslakta tutup Kaydet ile uygulayın.
- Field içinde kullanın ve aria-label ile alanın adını verin.

**Yapmayın:**

- Tarih aralığı için iki çark grubu koymayın; Date Range Picker kullanın.
- Varsayılan aralığa (100 yıl önce – gelecek yıl sonu) güvenmeyin; alana uygun sınır verin.
- Türkçe dışı bir panelde locale'i değiştirmeyi unutmayın.

## API

### `DateWheelPicker`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` | `Date` | - | Seçili tarih. Kontrolsüz kullanım için defaultValue verin. |
| `defaultValue` | `Date` | - | Kontrolsüz kullanımda ilk tarih. Verilmezse sınırlar içinde bugün. |
| `onValueChange` | `(value: Date) => void` | - | Şeridin altındaki tarihle, yerel saatle gece yarısı olarak çağrılır. |
| `minDate` | `Date` | - | Seçilebilen en erken gün. Verilmezse 100 yıl öncesinin başı. |
| `maxDate` | `Date` | - | Seçilebilen en geç gün. Verilmezse gelecek yılın sonu. |
| `monthFormat` | `"long" \| "short"` | `"long"` | Ay adları tam ("Ekim") ya da kısa ("Eki"). |
| `locale` | `string` | `"tr-TR"` | Ay adlarının dili, BCP 47 etiketi. |
| `size` | `"sm" \| "default"` | `"default"` | Satır yüksekliği: sm 32px, default 36px. |
| `visibleCount` | `number` | `5` | Görünen satır sayısı. Tek sayı verin. |
| `disabled` | `boolean` | `false` | Bütün çarkları kapatır. |
| `labels` | `{ day: string; month: string; year: string }` | `{ day: "Gün", month: "Ay", year: "Yıl" }` | Gün, ay ve yıl çarklarının erişilebilir adları. |
| `className` | `string` | - | Çerçeve için sınıflar. |
| `id` | `string` | - | Çerçevenin id'si, aria-labelledby için. |
| `aria-label` | `string` | - | Seçicinin tamamının erişilebilir adı. |