Bu yazımda HTML 5.1 ile gelen yeni bir input tipinden bahsetmek istiyorum. Şu anda tarayıcı desteği sadece Chrome ve Yandex'te bulunsa da tasarımını özelleştiremediğimiz için çoğu zaman bu input tipini zaten kullanmayacağız :) Ama yönetim paneli gibi yerlerde kullanılabilir ve bazen hayat kurtarır.

Bu input tipi ile kullanıcıya takvim içinden tek tıklama ile hafta seçtirebiliyoruz.

Geçelim input tipinin nasıl kullanıldığına;

<input type="week"/>

Peki bu input tipini post edince bize ne döndürüyor? sorusunu sorup test ettiğimde başımdan aşağı kaynar sular döküldü ve aslında pek de kullanışlı olmadığını düşünmeye başladım. 

Şöyle ki;

<!DOCTYPE html>
<html lang="tr">
	<head>
		<meta charset="UTF-8">
		<title>Week</title>
	</head>
	<body>

		<?
			if($_POST) {
				echo $_POST['hafta'];
				// Çıktı : 2016-W40
			}
		?>

		<form method="post" action="">
			<input type="week" name="hafta">
			<button type="submit">Yolla Yarim Tez Yolla</button>
		</form>

	</body>
</html>

Gördüğünüz gibi 2016 yılının 40. haftasını seçtiğim zaman 2016-W40 gibi saçma bir sonuç dönüyor.

Şimdi kollarımızı sıvayalım ve bunu daha kullanılabilir bir hale getirelim.

Ben PHP kullandığım için örnekleri PHP ile yazacağım. 2016-W40 verisini nasıl anlamlı hale getireceğiz?

Yıl ve Haftayı Ayırma;

// Yıl ve Hafta Ayırma Fonksiyonu
function weekYearParse($a) {
	$parca = explode("-",$a);
	$return['year'] = $parca[0];
	$return['week'] = substr($parca[1], -2);
	return $return;
}

// Kullanımı
print_r(weekYearParse('2016-W40'));

//Çıktısı
// Array ( [year] => 2016 [week] => 36 )

Asıl konumuz HTML 5.1 iken birden PHP'ye dönmeye başlamadan yazıyı örnek linkleri vererek bitiriyorum.

Bundan sonraki HTML 5.1 yazısında daha bomba birşeyle karşınızda olacağım, takip etmeyi ihmal etmeyin.

Örneği İncelemek için buraya tıklayabilirsiniz. (Chrome veya Yandex tarayıcı ile) veya örneği indirmek için buraya tıklayabilirsiniz.