jQuery: lavorare con le date

In questo articolo vedremo come visualizzare delle date in modo progressivo utilizzando l'oggetto JavaScript Date e jQuery.

L'oggetto Date quando viene istanziato crea una rappresentazione della data corrente se non viene passato come parametro una data specifica:

var today = new Date();

Questo oggetto dispone di vari metodi, tra cui:

• getDate(): restituisce il giorno del mese da 1 a 31
• getMonth(): restituisce il mese da 0 a 11, dove 0 è gennaio e 11 è dicembre
• getFullYear(): restituisce l'anno nel formato a quattro cifre.

Conoscendo questi metodi possiamo creare il seguente plugin:

(function( $ ) {
	$.fn.insertDays = function( options ) {
		options = $.extend( {
			range: 6,
			start: new Date(),
			element: '<li>'
		}, options );
		
		var insertDays = function( element ) {
			var today = options.start;
            var todayDayNum = today.getDate();
            var todayMonth = today.getMonth() + 1;
            var todayYear = today.getFullYear();
            
            var startDate = todayYear + '/' + todayMonth + '/' + todayDayNum;
            
            $( options.element ).text( startDate ).
            appendTo( element );
            
            for( var i = 0; i < options.range; ++i ) {
            	var day = todayDayNum += 1;  // aumenta di 1 il numero del giorno
            	var month = todayMonth;
            	
            	$( options.element ).text( todayYear + '/' + month + '/' + day ).
            	appendTo( element );
            }
            
		};
		
		return this.each( function() {
			var $element = $( this );
			insertDays( $element );
		
		});
	};

})( jQuery );

Esempio d'uso:

$(function() {
	$( '#days' ).insertDays();

});