# DijitalDatepicker

> Kurumsal düzeyde, sıfır harici bağımlılığa sahip, Türkiye resmi tatil takvimi, yasal iş günü hesaplama motoru, hızlı dönem/yıl gezintisi ve saat seçici destekli modern tarih kütüphanesi.

![Version](https://img.shields.io/npm/v/dijital-datepicker?color=blue&style=flat-square)
![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)
![Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square)
![Size](https://img.shields.io/badge/bundle%20size-~22%20KB-success?style=flat-square)

---

## 🌟 Öne Çıkan Özellikler

- **Sıfır Dış Bağımlılık (Zero-Dependency):** Flatpickr, Moment.js veya Day.js gerektirmez. Saf Vanilla ES6+ ve CSS (~22 KB minified bundle).
- **Hızlı Yıl & Dönem Gezintisi (Decade Jump):** Yıl seçim ekranında 12'şer yıllık dönemler halinde (`2016 – 2027`, `2004 – 2015`, `1992 – 2003`, `1980 – 1991`...) tek tıkla ileri/geri gidebilme.
- **Fare Tekerleği (Mouse Wheel) ile Akıcı Gezinti:** Takvim üzerinde fare tekerleğini çevirerek; günler modundayken ayları, aylar modundayken yılları, yıllar modundayken 12 yıllık dönemleri sayfa kaymadan yumuşakça gezinme.
- **Yerel Standart Tarih Formatı (`gg.aa.yyyy`):** Varsayılan olarak Türkiye standardı olan `gg.aa.yyyy` (ve saat için `gg.aa.yyyy ss:dd`) formatında otomatik maskeli gösterim ve klavyeden elle yazım desteği.
- **Türkiye Resmi Tatilleri Motoru:** Sabit resmi bayramlar (23 Nisan, 19 Mayıs, 29 Ekim vb.) ve dinamik Dini Bayramlar (Ramazan ve Kurban Bayramı) takvim üzerinde kırmızı rozet/nokta ve hover tooltip ile işaretlenir.
- **Yasal İş Günü Hesaplama Motoru (`BusinessDayEngine`):** Hafta sonları ve resmi tatilleri atlayarak net iş günü çıkarma (`calculateBusinessDays`) ve resmi kurumlara yönelik *"15 iş günü sonrası"* tebligat/itiraz tarihi hesaplama (`addBusinessDays`).
- **Esnek Seçim Modları:** Tekil tarih (`single`), Tarih aralığı (`range`), Çoklu tarih (`multiple`) ve Saat seçici (`time`).
- **Hızlı Hazır Aralıklar (Presets):** *"Bugün"*, *"Dün"*, *"Son 7 Gün"*, *"Bu Ay"*, *"Geçen Ay"*, *"Önümüzdeki 15 İş Günü"*.
- **Hicri Takvim Eşleşmesi (Hijri Date):** Seçilen günün Hicri takvim karşılığını otomatik gösterir (örn: *"15 Ramazan 1447"*).
- **Saat & Dakika Seçici (Time Picker):** `enableTime: true` ile 24 saat formatında şık saat ve dakika seçimi (`minuteStep` desteğiyle).
- **Mobil Alt Çekmece (Bottom-Sheet):** Mobilde (ekran <= 640px) otomatik olarak dokunmatik dostu alt çekmece moduna geçer.
- **Minimalist Zinc Tasarım Sistemi:** Açık (Light) ve Koyu (Dark) mod desteği (`#18181b`, `#27272a`, `#f4f4f5`).
- **Entegrasyonlar:** HTMX ve Alpine.js (`$ddp`) ile tam uyumlu reaktif mimari.

---

## 📦 Kurulum

### CDN Üzerinden Kullanım

```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dijital-datepicker/dist/dijital-datepicker.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/dijital-datepicker/dist/dijital-datepicker.min.js"></script>
```

UNPKG alternatifi:

```html
<link rel="stylesheet" href="https://unpkg.com/dijital-datepicker/dist/dijital-datepicker.min.css">
<script src="https://unpkg.com/dijital-datepicker/dist/dijital-datepicker.min.js"></script>
```

### NPM ile Kurulum

```bash
npm install dijital-datepicker
```

### ES Module (Modern Import)

```javascript
import DijitalDatepicker from 'dijital-datepicker';
import 'dijital-datepicker/dist/dijital-datepicker.min.css';
```

---

## 🚀 Hızlı Başlangıç

### 1. Basit Tarih Seçici (`gg.aa.yyyy`)

```html
<input type="text" id="tarihInput">

<script>
  const dp = new DijitalDatepicker('#tarihInput', {
    defaultDate: new Date(),
    onSelect: (date) => {
      console.log('Seçilen Tarih:', date);
    }
  });
</script>
```

### 2. Tarih Aralığı (Range) ve Hızlı Kısayollar

```html
<input type="text" id="aralikInput">

<script>
  const dpRange = new DijitalDatepicker('#aralikInput', {
    mode: 'range',
    presets: true, // "Bugün", "Bu Ay", "15 İş Günü" vb. hızlı kısayollar
    onSelect: (range) => {
      console.log('Başlangıç ve Bitiş:', range);
    }
  });
</script>
```

### 3. Saat Seçici Aktif (DateTime Picker)

```html
<input type="text" id="dateTimeInput">

<script>
  const dpTime = new DijitalDatepicker('#dateTimeInput', {
    enableTime: true,
    minuteStep: 15,
    onSelect: (date) => {
      console.log('Tarih ve Saat:', date);
    }
  });
</script>
```

---

## ⚙️ Yapılandırma Seçenekleri (Options)

| Parametre | Tip | Varsayılan | Açıklama |
| :--- | :--- | :--- | :--- |
| `mode` | `string` | `'single'` | Seçim modu: `'single'`, `'range'`, `'multiple'` |
| `format` | `string` | `'gg.aa.yyyy'` | Tarih formatı: `'gg.aa.yyyy'`, `'gg.aa.yyyy ss:dd'`, `'yyyy-aa-gg'` |
| `enableTime` | `boolean` | `false` | Saat ve dakika seçici barını aktifleştirir |
| `timeFormat` | `string` | `'24h'` | Saat biçimi (`'24h'`) |
| `minuteStep` | `number` | `5` | Dakika seçicinin artış adımı |
| `defaultDate` | `Date \| string` | `null` | Başlangıçta seçili gelecek tarih |
| `minDate` | `Date \| string` | `null` | Seçilebilecek en erken tarih |
| `maxDate` | `Date \| string` | `null` | Seçilebilecek en geç tarih |
| `disableWeekends` | `boolean` | `false` | Cumartesi ve Pazar günlerini seçime kapatır |
| `disableHolidays` | `boolean` | `false` | Türkiye resmi tatillerini seçime kapatır |
| `disabledDates` | `Array<string>` | `[]` | Seçime kapatılacak ISO tarih listesi (`['2026-05-15']`) |
| `showHolidays` | `boolean` | `true` | Resmi tatilleri nokta ve tooltip ile gösterir |
| `showBusinessDays`| `boolean`| `true` | Aralıklı seçimde alt barda net iş günü sayısını hesaplar |
| `showHijri` | `boolean` | `true` | Seçilen tarihin Hicri takvim karşılığını gösterir |
| `presets` | `boolean` | `true` | Range modunda hazır kısayol kenar çubuğunu gösterir |
| `theme` | `string` | `'system'` | Tema: `'light'`, `'dark'`, `'system'` |
| `closeOnSelect` | `boolean` | `true` | Seçim tamamlandığında popover'ı kapatır |

---

## 🛠️ API Metotları

Bir `DijitalDatepicker` örneği üzerinde çağrılabilecek metotlar:

```javascript
const dp = new DijitalDatepicker('#myInput');

dp.open();                  // Takvimi açar
dp.close();                 // Takvimi kapatır
dp.toggle();                // Takvimi açar/kapatır
dp.clear();                 // Seçimi temizler
dp.destroy();               // Event dinleyicilerini kaldırır ve DOM'u temizler
dp.navigateYear(-1);        // Bir yıl geri gider
dp.navigateYearsPage(-12);  // 12 yıllık dönem geriye atlar
```

---

## 🧮 Statik Hesaplama Metotları

İhtiyacınız olduğunda takvim arayüzü başlatmadan da arka planda yasal hesaplamalar yapabilirsiniz:

```javascript
// 1. Resmi Tatil Sorgulama
const tatil = DijitalDatepicker.getHoliday(new Date(2026, 9, 29));
console.log(tatil); // { name: "Cumhuriyet Bayramı" }

// 2. İki Tarih Arasındaki Net İş Günü (Tatilleri ve Hafta Sonlarını Düşer)
const baslangic = new Date(2026, 3, 1);
const bitis = new Date(2026, 3, 30);
const netIsGunu = DijitalDatepicker.calculateBusinessDays(baslangic, bitis);
console.log('Net İş Günü:', netIsGunu);

// 3. Yasal Süre Ekleme (Örn: Tebligattan itibaren 15 iş günü sonrası)
const tebligatTarihi = new Date(2026, 3, 15);
const sonItirazGunu = DijitalDatepicker.addBusinessDays(tebligatTarihi, 15);
console.log('Son İtiraz Tarihi:', sonItirazGunu);

// 4. Hicri Tarih Dönüştürücü
const hicri = DijitalDatepicker.toHijri(new Date());
console.log(hicri.formatted); // "10 Ramazan 1447"
```

---

## 📄 Lisans

MIT © Dijital Bilişim