jQuery: gestire l'elemento time

L'elemento HTML5 time ha un formato ben preciso per visualizzare la data corrente. In un blog solitamente questo elemento viene utilizzato per marcare la data di pubblicazione di un post. Per esempio possiamo avere una data del tipo 2011-11-06, ossia aaaa-mm-gg. jQuery ci permette di trasformare una semplice stringa come questa in qualcosa di più complesso, come una data sticky al lato del post. Vediamo come.

Partiamo da questa struttura HTML:

<article>
	<header>
		<h2>...</h2>
		<time datetime="2011-11-06" pubdate="pubdate">2011-11-06</time>
	</header>
	<!--...-->
</article>

Vogliamo trasformare time nella seguente struttura:

<time datetime="2011-11-06" pubdate="pubdate" class="datetime">
	<span class="month">Nov</span>
	<span class="day">6</span>
	<span class="year">2011</span>
</time>

Questa nuova struttura dovrà comparire al lato di ciascun post. Definiamo quindi il nostro CSS per usare il posizionamento contestuale:

article {
	width: 40%;
	margin: 0 auto;
	position: relative;
}
.datetime {
	width: 6em;
	position: absolute;
	top: 0;
	left: -7em;
}

.datetime .month {
	display: block;
	text-align: center;
	font: 2em Georgia, serif;
	background: #222;
	color: #fff;
	border-radius: 6px 6px 0 0;
	padding: 6px 0;
}

.datetime .day {
	display: block;
	text-align: center;
	font-size: 2em;
	background: #333;
	color: #fff;
	padding: 10px 0;
	letter-spacing: 2px;
}

.datetime .year {
	display: block;
	text-align: center;
	font: 2em Georgia, serif;
	background: #222;
	color: #fff;
	border-radius: 0 0 6px 6px;
	padding: 6px 0;
}

Con jQuery creiamo subito una funzione per trasformare un mese numerico nel suo equivalente letterale abbreviato:

function formatMonth(month) {

	var formattedMonth = '';
	
	switch(month) {
	
		case '01':
			formattedMonth = 'Gen';
			break;
		case '02':
			formattedMonth = 'Feb';
			break;
		case '03':
			formattedMonth = 'Mar';
			break;
		case '04':
			formattedMonth = 'Apr';
			break;
		case '05':
			formattedMonth = 'Mag';
			break;
		case '06':
			formattedMonth = 'Giu';
			break;
		case '07':
			formattedMonth = 'Lug';
			break;
		case '08':
			formattedMonth = 'Ago';
			break;
		case '09':
			formattedMonth = 'Set';
			break;
		case '10':
			formattedMonth = 'Ott';
			break;
		case '11':
			formattedMonth = 'Nov';
			break;
		case '12':
			formattedMonth = 'Dic';
			break;
		default:
			break;
		
	
	
	}
	
	return formattedMonth;

}

Quindi procediamo alla creazione della nuova struttura:

function replaceTime() {

	$('time', 'header').each(function() {
	
		var $time = $(this);
		var text = $time.text();
		
		var timeParts = text.split('-');
		
		var year = timeParts[0];
		var month = formatMonth(timeParts[1]);
		var day = timeParts[2].replace(/^0/, '');
		
		var html = '<span class="month">' + month + '</span>' +
		           '<span class="day">' + day + '</span>' +
		           '<span class="year">' + year + '</span>';
		           
		           
		$time.addClass('datetime').html(html);
	
	});


}

Infine richiamiamo la nostra funzione principale:

$(function() {

	replaceTime();

});

Potete visionare l'esempio finale in questa pagina.