Realizzazione di un sistema che permetta di trasformare agilmente, velocemente ed in maniera pulita un campo input text in uno con le funzionalità di calendario jquery (li dove sia attivato javascript).

Demo finale: Input text con jquery calendar (javascript abilitato):

Testato con: jquery 1.7.1, jquery ui 1.8.16

• 0) prerequisiti:

• scarica jquery
• scarica jquery ui css

• 1) includi i 3 file nell’intestazione del template così come riportato:

<script type="text/javascript" src="${pageContext.request.contextPath}/path_js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/path_js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/path_css/jquery-ui-1.8.16.custom.css"/>

• 2) crea un file javascript con il seguente contenuto (esempio file: uxp.js):

function normalize(a) {
	return a.replace(/(:|\.)/g, '\\$1');
}

/**
 * wrapper calendar jquery con format data italiano - senza icona
 * 
 * @param a
 */
function calendarTextIT(a) {
	a = normalize(a);
	$(function() {

		$.datepicker.setDefaults($.datepicker.regional["it"]);
		$("#" + a + "").datepicker({
			dateFormat : "dd/mm/yy",
			numberOfMonths : 1,
			firstDay : 1,
			prevText : "Prec",
			nextText : "Succ",
			changeMonth : true,
			changeYear : true
		});

	});
}

• 3) includi il file javascipt appena creato (esempio nome file: uxp.js):

<script type="text/javascript" src="${pageContext.request.contextPath}/path_js/uxp.js"></script>

• 4) crea un file javascript per il caricamento dinamico delle funzionalità uxp (user experience) con il seguente contenuto (esempio file: load.js) e poi includilo:

/**
 * caricamento uxp
 */

jQuery(document).ready(function() {
	
	$('.css_input_calendar').each(function(index) {
		calendarTextIT($(this).attr('id'));
	});
});

<script type="text/javascript" src="${pageContext.request.contextPath}/path_js/load.js"></script>

• 5) modifica il campo input text che ti interessa inserendo nel tag class la classe css css_input_calendar:

...
<input type="text" name="prova_text" id="prova_text" class="css_input_calendar other_css" />
..

Fatto 🙂
Adesso per attivare questa funzionalità a qualsiasi input text sarà sufficiente dichiarare la classe css_input_calendar nel tag class