# LivaDateBox
Package: @dataliva/livalib
Description: @dataliva/livalib tarih ve saat seçici bileşeni.

DevExtreme'in DateBox bileşeni üzerine kurulu tarih/saat seçici;
takvim, saat ve tarih-saat modlarını destekler.

```tsx
import { LivaDateBox } from "@dataliva/livalib";
```

## Varyantlar

Görünüm stilini `variant` belirler: `standard`, `outlined`, `filled`.

**Örnek — Varyantlar:**

```tsx
<LivaDateBox variant="standard" label="Standard" defaultValue={new Date(2026, 5, 15)} width={220} />
<LivaDateBox variant="outlined" label="Outlined" defaultValue={new Date(2026, 5, 15)} width={220} />
<LivaDateBox variant="filled" label="Filled" defaultValue={new Date(2026, 5, 15)} width={220} />
```

## Tarih türleri

`type` prop'u `date`, `datetime` ve `time` modları arasında geçiş yapar.

**Örnek — Tarih türleri (type):**

```tsx
<LivaDateBox type="date" label="Tarih" defaultValue={new Date(2026, 5, 15)} width={220} />
<LivaDateBox type="datetime" label="Tarih ve saat" defaultValue={new Date(2026, 5, 15, 14, 30)} width={240} />
<LivaDateBox type="time" label="Saat" defaultValue={new Date(2026, 5, 15, 14, 30)} width={180} />
```

## Görüntüleme biçimi

`displayFormat` seçilen değerin giriş alanında nasıl gösterileceğini belirler.

**Örnek — Görüntüleme biçimi (displayFormat):**

```tsx
<LivaDateBox label="Kısa" displayFormat="dd.MM.yyyy" defaultValue={new Date(2026, 5, 15)} width={200} />
<LivaDateBox label="Uzun" displayFormat="dd MMMM yyyy" defaultValue={new Date(2026, 5, 15)} width={240} />
<LivaDateBox label="Ay/Yıl" displayFormat="MM/yyyy" defaultValue={new Date(2026, 5, 15)} width={180} />
```

## Kontrollü değer

`value` ve `onValueChanged` ile seçilen tarih state üzerinden yönetilebilir.

**Örnek — Kontrollü değer:**

```tsx
<LivaDateBox
  label="Toplantı tarihi"
  value={date}
  onValueChanged={(e: { value: string | number | Date }) => setDate(new Date(e.value))}
  width={240}
/>
<p>Seçilen: {date.getDate()}.{date.getMonth() + 1}.{date.getFullYear()}</p>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `value` | `Date \| number \| string` | — |
| `defaultValue` | `Date \| number \| string` | — |
| `type` | `'date' \| 'datetime' \| 'time'` | `'date'` |
| `displayFormat` | `string` | — |
| `min` | `Date \| number \| string` | — |
| `max` | `Date \| number \| string` | — |
| `pickerType` | `'calendar' \| 'list' \| 'native' \| 'rollers'` | `'calendar'` |
| `placeholder` | `string` | — |
| `variant` | `'standard' \| 'outlined' \| 'filled'` | `'outlined'` |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `label` | `string` | — |
| `onValueChanged` | `(e) => void` | — |
| `disabled` | `boolean` | `false` |
| `required` | `boolean` | `false` |
| `hint` | `string` | — |

Ayrıca DevExtreme `IDateBoxOptions`'tan gelen tüm prop'lar
(ör. `showClearButton`, `applyValueMode`, `calendarOptions`) kullanılabilir.