---
title: "Date Picker"
description: "Outline butondan açılan takvimle tek tarih seçtirir. Tarihi dd.MM.yyyy biçiminde gösterir."
---

<Callout type="info" title="Ne zaman kullanılır">
Formlarda tek bir tarih: kampanya bitişi, teslim tarihi, rapor günü. Başlangıç ve bitiş birlikte seçiliyorsa [Date Range Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/date-range-picker) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/date-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

### Basit

Boşken placeholder gösterir. Gün seçilince popover kapanır.

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

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

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

export default function DatePickerSimple() {
  const [date, setDate] = React.useState<Date>()

  return <DatePicker value={date} onValueChange={setDate} />
}
```

### En erken ve en geç tarih

minDate ve maxDate dışındaki günler seçilemez; takvim de bu aylarla sınırlanır. FieldLabel için id verin.

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

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

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

export default function DatePickerMinMax() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 10, 3))

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

## Kullanım ilkeleri

**Yapın:**

- Geçerli aralığı minDate ve maxDate ile verin, FieldDescription'da yazın.
- Field içinde kullanın; hata durumunda aria-invalid verin.

**Yapmayın:**

- Tarihi serbest metin Input'u ile almayın.
- Saat gerekiyorsa bu bileşeni zorlamayın; ayrı bir saat alanı ekleyin.

## API

### `DatePicker`

| 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. |
| `onValueChange` | `(value: Date \| undefined) => void` | - | Seçilen tarihle, seçim kalkınca undefined ile çağrılır. |
| `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 seçin"` | Tarih seçilmemişken butondaki metin. |
| `dateFormat` | `string` | `"dd.MM.yyyy"` | Butondaki biçim, 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. |