Merhabalar,

Bu yazımda web sitenize kolayca entegre edebileceğiniz modern ve kullanışlı bir Tarih Seçici (Date Picker) eklentisinden bahsedeceğim. Araştırma yaptıysanız, bu konuda birçok eklenti olduğunu fark etmişsinizdir. Ben bu örnek için MCDatepicker eklentisini tercih ediyorum çünkü modern arayüzü, 3 farklı kullanım seçeneği ve kolay kurulumu ile öne çıkıyor.

Buraya tıklayarak eklentinin sayfasına gidebilir ve sağ üstteki Download butonu ile zip dosyasını indirebilirsiniz.

Web sitenize entegre etmek için aşağıdaki iki dosyaya ihtiyacınız olacak (dosyalar dist klasöründe):

• 1 adet CSS dosyası: mc-calendar.min.css
• 1 adet JavaScript dosyası: mc-calendar.min.js

İlk olarak bu dosyaları HTML sayfanıza ekleyin:

<link rel="stylesheet" href="/dist/mc-calendar.min.css" />
<script src="/dist/mc-calendar.min.js"></script>

Ardından, tarih seçici olarak kullanılacak input alanını oluşturun:

<input id="tarih" type="text" placeholder="Tarih Seçiniz" />

Varsayılan olarak gelen kurulum İngilizce dilindedir. Ancak biz Türkçe bir yapı kuracağız. İşte Türkçe tarih seçici ayarları:

<script>
  const myDatePicker = MCDatepicker.create({
    el: '#tarih', // input ile aynı ID'ye sahip olmalı
    showCalendarDisplay: false, // Takvimi direkt göstermek isterseniz true yapabilirsiniz
    dateFormat: 'DD-MM-YYYY', // Tarih formatı
    customClearBTN: 'Temizle',
    customOkBTN: 'Tamam',
    customCancelBTN: 'İptal Et',
    customWeekDays: [ 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Ctesi', 'Pazar' ],
    customMonths: [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
                    'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık' ]
  });
</script>

Bu şekilde web sitenize Türkçe destekli bir tarih seçici ekleyebilirsiniz. Dikkat etmeniz gereken nokta: input alanına verdiğiniz id değeri, JavaScript ayarlarında kullanılan el parametresiyle birebir aynı olmalıdır.

Daha fazla özellik için orijinal sayfayı da inceleyebilirsiniz.

Mutlu Kodlamalar! :)