Luiscanada Com

Anuncios Google
RSS
Twitter
Facebook
Jquery
Posterous
Jquery Slider
Portfolio
Jquery UI Slider
Contacto
Busca: escribe y pulsa ENTER!
Enter
Categoras abiertas del men
Qyujernkercepidatunarzi lCm
iuto
24 agosto, 2011 - jQuery / JS, Plugins Tweet
Like
9 likes. Sign Up to see what your friends like.
1 Comentario
Hoy en da pocos somos los que utilizamos los clsicos y bsicos Notepad (W IN) o TextEdit (MAC) para crear nuestros cdigo, delegando la mayora de funciones
a editores w eb como Adobe Dreamw ear, Zend Studio, Microsoft Visual Studio los cules brindan adems libreras que facilitan mucho nuestro trabajo.
Como ya te he comentado en muchas ocasiones, jQuery es una librera open Source rpida y concisa que simplifica el manejo de eventos, animaciones e
interacciones AJAX para un rpido desarrollo.
Este framew ork ha cambiado la manera de interpretar Javascript. A continuacin vamos a ver como trabajar con campos de fecha (DatePicker). Puedes descargar
el cdigo fuente desde aqu o ver desde aqu su funcionamiento.
om
utnceod lednicaeCr- .1
Crea un documento HTML bsico.
jQuery HTML5 Charts Interactive JavaScript Chart widget Runs on PC,Mobile & Touch devices www.jqwidgets.com
Mail Server Archiving Eliminate PST File Management... Try Risk-Free GFI MailArchiver 2011 www.gfi.com
HTML5+CSS+jQuery Build HTML5 websites Build mobile applications www.kendoui.com
saicnerefR
e- .2
Referencia a los archivos JS y CSS necesarios desde la cabecera de tu pgina, dentro de la seccin head.
<link rel="stylesheet" typePreview post="text/css" href="demos.css">

<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script
<script
<script
<script
src="jquery-1.5.1.js"></script>
src="jquery.ui.core.js"></script>
src="jquery.ui.widget.js"></script>
src="jquery.ui.datepicker.js"></script>
Puedes personalizar el archivo demo.css para modificar el aspecto y posicionamiento del datepicker.
nedrekcipetad leaeCr- .3
En este paso deberemos crear un contenedor en el que usar el datepicker e inicializar el comportamiento. Para no andarnos con demasiados rodeos,te muestro
cmo quedara el cdigo completo:
<html>
<head>
<title>Uso de fechas con JQUERY</title>

<link rel="stylesheet" type="text/css" href="demos.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css">

<script src="jquery-1.5.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div style="width:500px; height:auto; font-size:small;">
converted by Web2PDFConvert.com
<div style="width:500px; height:auto; font-size:small;">

<div class="demo">
<p>Selecciona la fecha: <input type="text" id="datepicker"></p>
</div>
</div>
</body>
</html>
El resultado final ser algo as:
edsorm
terapedsetsuAj- .4
Formato de fecha
Por defecto se muestran las fechas con el formato mes/dia/ao. Veamos como modificarlo y adaptarlo al sistema europeo:
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$("#datepicker").datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
jQuery puede trabajar con los siguientes formatos de fecha:
mm/dd/yy como 06/12/10
yy-mm-dd como 10-06-12
d M, y como 6 Jun, 10
d MM, y como 6 June, 10
DD, d MM, yy como Sunday, 6 June, 2010
day d of MM in the year yy como day 6 of June in the year 2010
Para verlo, modifica tu fichero HTML adaptndolo a tus necesidades. En mi caso:
<p>Selecciona el formato de fecha a mostrar:

<select>
<option
<option
<option
<option
<option
<option
</select>
value="mm/dd/yy">Default - mm/dd/yy</option>
value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
value="d M, y">Short - d M, y</option>
value="d MM, y">Medium - d MM, y</option>
value="DD, d MM, yy">Full - DD, d MM, yy</option>
value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the ye ar' yy</option>
</p>
El resultado ser el siguiente:
Rango de fechas
Adems pueden especificarse una fecha mnima y/o mxima (imagina un sistema de reservas de hotel, por ejemplo). Para ello deberemos definir las variables
minDate y maxDate, pudiendo indicar meses, das
Sirva el siguiente cdigo como ejemplo, en la que la fecha mnima es de 40 das antes de la fecha actual y la fecha mxima ser 2 meses y 5 das despus:
<script>
$(function() {
$("#datepicker").datepicker({minDate: -40, maxDate:"+2M +5D" });
});
</script>
Mostrar el datepicker
Hasta el momento el datepicker apareca cuando el usuario clicaba sobre un textbox. Podemos mostrar el datepicker sin necesidad de que tenga que aparecer
tras un click del user. Para ello:
Select the Date: <div></div>

Cuyo resultado:
DatePicker con desplegable de MES y AO

Para ello, procederemos de la siguiente manera:
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
Cuyo resultado:
Entrada siguiente: jQuery Thumbs: crear miniaturas de imgenes nunca haba sido tan simple >>
<< Entrada anterior: El porqu de las FanPages de Facebook
Posts Relacionados: 3 plugins SEO para W P que deberas conocer | 30 sitios donde descargar imgenes gratuitas | Formas de perder el tiempo posicionando w ebs
| Qu hacer si Google te ha penalizado en su last update | Men de subnavegacin (CSS+JQuery) | NounProject: Gran coleccin de iconos vectoriales | Reveal:
Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets tiles que deberas conocer | Formulario en varios pasos
usando jQuery |
1 comentario to Cmo utilizar un datepicker en jQuery

Dayb dice:
4 febrero, 2012 a las 4:24
Buenas
gracias por el aporte, ya lo implement en mi w eb pero necesito pasar el valor del input que contiene el datepicker a una variables php antes de enviar
el formulario en el cual est.
Muchas gracias
Deja un comentario
Nombre (*)
Mail (no ser publicado) (*)
Web
Comentar
2012 Luis Caada BLOG Todos los derechos reservados
RSS
Sgueme en Twitter
Agrgame a Facebook

Luiscanada Com

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Luiscanada Com

Transféré par

Droits d'auteur :

Formats disponibles

Anuncios Google

Busca: escribe y pulsa ENTER!

Categoras abiertas del men

9 likes. Sign Up to see what your friends like.

<link rel="stylesheet" typePreview post="text/css" href="demos.css">

<div style="width:500px; height:auto; font-size:small;">

<p>Selecciona el formato de fecha a mostrar:

Select the Date: <div></div>

DatePicker con desplegable de MES y AO

1 comentario to Cmo utilizar un datepicker en jQuery

Mail (no ser publicado) (*)

2012 Luis Caada BLOG Todos los derechos reservados

Vous aimerez peut-être aussi