dijital-datepicker

v1.0.2

Published

16 days ago

Modern, kurumsal, sıfır bağımlılıklı, Türkiye resmi tatilleri ve iş günü hesaplama destekli tarih ve saat seçici kütüphanesi

0High
0Medium
0Low

then1ghtmanager

datepicker date-range-picker timepicker turkey-holidays resmi-tatil is-gunu business-days zero-dependency vanilla-js ebys erp htmx

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

🌟 Ö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

<!-- 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:

<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

npm install dijital-datepicker

ES Module (Modern Import)

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`)

<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

<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)

<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)

🛠️ API Metotları

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

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:

// 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"

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme