Kosa ya Kubadilisha Kalenda katika JavaScript

Wacha tutake kutengeneza mishale ya kubadilisha kalenda. Katika kesi hii, mtu anaweza kufanya makosa ya kawaida. Hebu tuyaangalie.

Wacha tuwe na vitufe vya kubadilisha na kipengele ambacho kwa urahisi tutatumia kuonyesha sio kalenda, lakini mwaka na jina la mwezi tu:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

Tutapata viungo kwa vipengele vyetu:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

Wacha tuwe pia na kitendakazi ambacho huchukua nambari ya mwezi kama kigezo na kurudisha jina lake:

function getMonthName(month) {
	let names = [
		'Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun',
		'Jul', 'Ago', 'Sep', 'Okt', 'Nov', 'Des'
	];
	
	return names[month];
}

Wacha tuupate mwaka na mwezi wa sasa ukurasa unapopakuliwa:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

Tutaonyesha kwenye kipengele chetu mwaka na jina la mwezi (kuiga kalenda):

elem.textContent = year + ' ' + getMonthName(month);

Sasa wacha tuweke wakataji matukizo kwa vibonyezo vya kubadilisha:

prev.addEventListener('click', function() {
	// onyesha mwezi uliopita
});

next.addEventListener('click', function() {
	// onyesha mwezi ujao
});

Sasa hebu tuangalie makosa gani yanaweza kufanywa wakati wa kutekeleza vibadilishaji.

Kosa la Kwanza

Wacha tusema programer fulani alitekeleza vitufe vya kubadilisha miezi kama ifuatavyo:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

Hata hivyo, programer huyu alifanya kosa, ambalo hufanya mwezi ubadilike tu kwa kubofya kwa mara ya kwanza, lakini sio kwa kubofya kwa nyakati zijazo.

Jambo ni kwamba kutofautisha month hakibadiliki ndani ya vitendakazi - yaliyomo ndani yake hujumlishwa na moja na matokeo hutumwa kwenye kitendakazi getMonthName.

Kwa kuwa kutofautisha kwetu hakubadilika, basi kwa kubofya kinachofuata ndani yake bado utakuwa na mwezi wa sasa - na hakuna kitu kitakachobadilika.

Hebu turekebishe tatizo:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

Inaweza kurahisishwa:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

Kosa la Pili

Mara nyingi husahaulika kwamba mwezi unapaswa kubadilika katika anuwai fulani - kutoka 0 hadi 11. Wakati wa kufikia mpaka wa anuwai tunapaswa kubadilisha mwaka (mbele au nyuma), na kuweka upya mwezi kwa thamani ya kwanza ya mwezi.

Hebu tufanye hivyo:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});