jQuery UI Datepicker için Gün Filtresi

Geçenlerde sevgili Mert abim, bu konu hakkında benden ufak bir ricada bulundu. Biraz araştırdıktan sonra mantığı kavradım ve kullanmak için basit bir fonksiyon hazırladım. Bu fonksiyon ile datepicker için gün filtresi yapabiliyorusunuz..

Bize lazım olan sadece mevcut zamandan şu kadar gün sonrasını seçememe gibi bir olaydı.. Bende ona göre bir fonksiyon yazdım, ancak fonksiyonu biraz incelerseniz istediğiniz kısımları kendinizde devam ettirebilirsiniz diye düşünüyorum..

Öncelikle fonksiyon kodlarını vereyim;

function gunFiltre(date, dlimit, goncesi, pgun, agun) {
	
	/**
	 * Mevcut günden sonra kaç gün daha gözükebilsin?
	 */
	var gunLimit = dlimit ? dlimit : 0;
	
	/**
	 * Mevcut günden önceki diğer günlerin hepsi gözüksün
	 */
	var gunOncesi = goncesi;
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye pasif olmasını istediğiniz günleri yazın
	 */
	var pasifGun = pgun ? pgun : [];
	
	/**
	 * Günleri belirleyip işlem yaptırmak isterseniz bu diziye aktif olmasını istediğiniz günleri yazın
	 */
	var aktifGun = agun ? agun : [];
	
	var bugunTarih = String(new Date()).split(' ');
	var mevcutTarih = String(date).split(' ');
	var ayDogrumu = bugunTarih[1] == mevcutTarih[1];
	
	/** 
	 * belirli günleri pasif eder
	 */
	if ( pasifGun.length > 0 ){
		if ( ayDogrumu && pasifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [false];
		} else {
			return [true];
		}
	}
	
	/** 
	 * belirli günleri aktif eder
	 */
	if ( aktifGun.length > 0 ){
		if ( ayDogrumu && aktifGun.indexOf(parseInt(mevcutTarih[2])) != -1) {
			return [true];
		} else {
			return [false];
		}
	}
	
	/**
	 * gün limiti belirlenmişse mevcut zamandan o gün limiti kadarından sonrasını pasif yapar
	 */
	if ( gunLimit !== 0 && ayDogrumu ){
		for ( i = 0; i <= gunLimit; i++ ){
			if ( (parseFloat(bugunTarih[2]) + i) == mevcutTarih[2] ){
				return [true];
			}
		}
	}
	
	/**
	 * mevcut zamandan önceki günleri eğer belirlenmiş ise pasif yapar
	 */
	if ( gunOncesi === true && ayDogrumu ){
		if ( mevcutTarih[2] < parseFloat(bugunTarih[2]) ) {
			return [true];
		}
	}
	
	if ( ayDogrumu && gunLimit !== 0 ){
		return [false];
	} else {
		return [true];
	}
	
}

Nasıl kullanacağız?

Örnek kullanımları şöyle;

Sadece bugün ve 3 gün sonrası aktif olsun, diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3);
	}
});

Bugünden önceki günler ve bugünden sonraki 3 gün hariç diğer günler pasif olsun.

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 3, true);
	}
});

Ayın sadece 1,7 ve 8. günleri pasif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [1, 7, 8]);
	}
});

Ayın sadece 1,5 ve 12. günleri aktif olsun;

$('#datepicker').datepicker({
	beforeShowDay: function(tarih){
		return gunFiltre(tarih, 0, true, [], [1,5,12]);
	}
});

Canlı demo;

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery UI Datepicker için Gün Filtresi” üzerine 5 yorum

  1. Merhaba ,

    teşekkürler çok güzel bir konuya değinmişsiniz

    "Ayın sadece 1,5 ve 12. günleri aktif olsun;"

    ben bunu kullanıyorum ama sadece olduğumuz ayın günlerini açıyor

    diğer aylarında bugünlerinin açık olmasını istiyorum ne yapabilirim

  2. Ben bunu sadece geçerli ay için yazmıştım, ihtiyacımdan dolayı. Ay ve yıl belirleme işlemi için bir mantık yürüteyim, kodlarımı güncellerim.

  3. Tayfun, aklına fikrine sağlık. Tebrikler kardeşime.. Konular, anlatım ve hakimiyet süper. Tekrar tebrikler..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir