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 🙂
