Calendario con JQueryUI
Crear un calendario con JQueryUI es algo cencillo, solo debemos hacer lo siguiente..
- Mandar a llamar las librerías correspodientes [ javascript (.js) y hojas de estilo (.css)].
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery.ui.datepicker-es.js"></script> <script type="text/javascript" src="jquery.ui.datepicker.js"></script> <link type="text/css" href="demos.css" rel="stylesheet" />
- Luego invocamos al Datepicker sobre el campo de texto, con una llamada al método datepicker() sobre el objeto jQuery del elemento campo de texto (#datapicker es el id de nuestro campo de texto).
<script type="text/javascript"> $(function() { $("#datepicker").datepicker({ showOn: 'both', //Parametro para que se vea el icono del calendario buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón buttonImage: 'calendar.gif', //Indicamos el icono del botón firstDay: 1, //El primer día será el 1 changeMonth: true, //Si se pueden cambiar los meses changeYear: true //Si se pueden cambiar los años }); }); </script>
- Dentro de nuestro body tendremos nuestro campo de texto que se convertirá en un bonito calendario..
<div class="demo"> Fecha: <input type="text" id="datepicker"> </div> <div class="demo-description"> Coloca el puntero en la caja de texto ó da clic sobre el calendario! </div>
y listo solo falta probar y veremos algo como esto.
Espero sea de grán ayuda!
Aquí el código completo..
<html>
<head>
<title>jQuery UI Datepicker</title>
<link type="text/css" href="jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker-es.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
showOn: 'both', //Parametro para que se vea el icono del calendario
buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón
buttonImage: 'calendar.gif', //Indicamos el icono del botón
firstDay: 1, //El primer día será el 1
changeMonth: true, //Si se pueden cambiar los meses
changeYear: true //Si se pueden cambiar los años
});
});
</script>
</head>
<body>
<div class="demo">
Fecha: <input type="text" id="datepicker">
</div>
<div class="demo-description">
Coloca el puntero en la caja de texto ó da clic sobre el calendario!
</div>
</body>
</html>Pueden descargar el ejemplo de aquí
ó pueden descargar el JQuery-UI completo desde aquí http://jqueryui.com/download y hacer pruebas a sus gustos viendo los demos que vienen con la librería..
Dudas, comentarios, sugerencias y/ó saludos no duden en hacerlos llegar.
Saludos!!
Quizá te interese :
Hace veinte años este mes, algo sucedió en el CERN que cambiaría el mundo para siempre: Tim Ber ...
Uno de los grandes beneficios de trabajar con una plataforma de desarrollo como es Ruby on Rails ...
By Blogsdna
Oye no podrías poner el código en la página?
De las imágenes no se puede copiar.
tengo instalado sfjqueryuiplugin necesito que me aparezca el calendario en unas cajas de texto creadas en html ya hice todo lo anterior y no me funciona
me ayudan por favor
es urgente
Saludos Gaby
Para probar (y encontrar donde falla) tu código te recomiendo usar Firefox y su consola de errores junto con Firebug (http://www.getfirebug.com), y revises si no te indican algún error adicional.
Puedes pegar tu código , para poder ver más claramente el error y ayudarte más fácilmente.