Tarih Seçici Ekleme (MC Date Picker)

Bu yazımda web sitenize entegre edebileceğiniz Tarih Seçici (Datepicker) eklentisinden bahsettim. Nasıl yapıldığına dair detayları öğrenmek için yazımı okuyabilirsiniz.

Merhabalar,

Bu yazımda web sitenize entegre edebileceğiniz Tarih Seçici eklentisinden bahsedeceğim. Araştırma yaptıysanız bu konuyla bir çok eklenti olduğunu görmüşsünüzdür.

Ben bu konu için bana göre modern yapısı, 3 farklı kullanım şekli ve kolay kurulumu olan MCDatepicker eklentisini seçiyorum. 

Bağlantıya tıklayıp sayfayı açtıktan sonra sağ üst köşede bulunan Download butonu ile eklentinin zip dosyasını indirebilirsiniz.

Web sitenize entegre etmek için 2 dosyaya ihtiyaç var.

  • 1 adet Css (mc-calendar.min.css)
  • 1 adet Javascript (mc-calendar.min.js)

Bu 2 dosyaya indirdiğiniz Zip dosyası içinde bulunan dist klasörü içinden erişebilirsiniz.

Dediğim gibi size verdiğim bağlantı sayfasında kurulum aşamasını tek tek anlatıyor. Ben de eklentiyi türkçe ayarlayacak şekilde size aktaracağım.

Öncelikle dist klasöründe bulunan dosyaların yolunu vererek siteye bağlıyoruz.

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

Daha sonra tıklanınca açılacak olan input elementini id vererek tanımlıyoruz.

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

Varsayılan kurulumda tarih formatı, ay ve gün isimleri normal olarak İngilizce olarak veriliyor.

Ben ise Türkçe kurulumu aşağıya bırakıyorum.

<script>
  const myDatePicker = MCDatepicker.create({ 
        el: '#tarih', // input id ile eşleşmeli
        showCalendarDisplay: false, // Takvim görünümü istiyorsanız `true` yapınız
        dateFormat: 'DD-MM-YYYY', // Tarih formatı
        customClearBTN: 'Temizle', // Temizle butonu yazısı
        customOkBTN: 'Tamam', // Tamam butonu yazısı
        customCancelBTN: 'İptal Et', // İptal Et butonu yazısı
        customWeekDays: [
         'Pazartesi',
         'Salı',
         'Çarşamba',
         'Perşembe',
         'Cuma',
         'Ctesi',
         'Pazar'
        ], // Türkçe gün isimleri
        customMonths: [
        'Ocak',
        'Şubat',
        'Mart',
        'Nisan',
        'Mayıs',
        'Haziran',
        'Temmuz',
        'Ağustos',
        'Eylül',
        'Ekim',
        'Kasım',
        'Aralık'
        ] // Türkçe ay isimleri
  });
</script> 

Bu şekilde sitenize Türkçe ara yüze sahip bir tarih seçici entegre edebilirsiniz. Dikkat etmeniz gereken nokta input id değeri ile script etiketi içinde çağırdığımız id değerinin eşit olmasıdır.

Farklı özellikleri incelemek için yukarıda vermiş olduğum bağlantıya da göz atabilirsiniz.

Umarım faydalı bir yazı olmuştur.

Mutlu Kodlamalar 🙂

1 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku

Javascript Metni Kopyala Butonu
Devamını Oku

Input Metni Kopyala Butonu

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsettim. Detaylar için yazımı kontrol edebilirsiniz.

Devamını Oku