viernes, septiembre 02, 2011

DatePicker con Jquery

Si ocupa un datepicker, aqui como integrarlo sencillamente;



<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>


$(document).ready(function() {
$("#datepicker").datepicker({

defaultDate: document.forms['myForm'].elements['dateSelected'].value,
onSelect: function(dateText, inst) {

alert (dateText);
document.forms['myForm'].elements['dateSelected'].value = dateText;
}
});
});
</script>
</head>
<body style="font-size:62.5%;">

<form name="myForm" action="algo.do" method="post">

<input type="hidden" name="dateSelected" value="10/04/1984"/>
<div id="datepicker"></div>

</form>
</body>
</html>





Como funciona, sencillo. Solo tenes que colocar una fecha en el input dateSelected, por ejemplo con jstl seria algo como

 input type="hidden" name="dateSelected" value="${dateSelected} 


Ese seria un binding basico para colocar la fecha (en texto, formateada como MM/dd/yyyy), el javascript funcionara perfectamente con eso no necesita cambios.

En el servidor, puede recibir el valor con el post del formulario como dateSelected.

Ocupa mas custom en el plato, aqui esta la carta, sirvase:
http://docs.jquery.com/UI/Datepicker

Pura vida,
J