Es un quebradero de cabeza crear desde 0 un selector de fechas o datepicker en JavaScript.

Gracias a la libreria JQuery podemos crear en unas pocas lineas un selector de Fechas (datepicker) totalmente funcional y con varias opciones para personalizar.

Pero antes podemos descargar el framework CSS JQuery UI que viene con todo los estilos e imagenes que nos ahorraran tiempo cuando necesitemos estilizar nuestro datepicker.

Puedes personalizar los colores y estilos CSS para despues descargarlos y usarlos en tu datepicker visitando el siguiente enlace:

http://jqueryui.com/themeroller/

En nuestra cabecera llamamos a nuestra hoja de estilos y las librerias JQuery necesarias para nuestro datepicker

[php] <script charset="utf-8" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script charset="utf-8" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
[/php]

Ahora simplemente utilizamos la funcion datepicker(); para indicarle que campo de texto queremos que sea nuestro selector de fechas.

[php] <script type="text/javascript">// <![CDATA[
$(document).ready(function(){ $(‘#date2’).datepicker(); });
// ]]></script>
[/php]

Despues en nuestro codigo html insertamos un cuadro de texto con el identificador que colocamos en el código javascript.

[php] <input id="date2" type="text" />
[/php]

y queda de la siguiente manera:

Personalicemos más  nuestro script:

[php] $(document).ready(function(){
$(‘#date2’).datepicker({
showOn: ‘both’,
buttonText: ‘Selecciona una fecha’,
buttonImage: ‘calendar.png’,
buttonImageOnly: true,
numberOfMonths: 2,
maxDate: ‘0d’,
minDate: ‘-1m’,
showButtonPanel: true
});
});
[/php]

showOn nos permite indicarle en que posicion queremos que aparesca el calendario las opciones disponibles son ‘both’, ‘focus’ y ‘botton’.

buttonText: Mostrara un texto al colocar el mouse en el icono.

buttonImage: La imagen del boton que usaremos.

buttonImageOnly: ‘True’ si queremos utilizar una imagen en vez del boton clásico.

numberOfMonths: Cuantos meses queremos mostrar.

maxDate: Cuantos dias o meses o años disponibles para seleccionar a partir de la fecha actual en nuestro ejemplo ‘0d’ mostrará solo el dia actual  , se puede usar ‘y’ por año, ‘d’ por dia, ‘w’ por semanas, ‘m’ por mes.

minDate: El rango minimo disponilble para seleccion, en nuestro caso menos 1 mes a partir de la fecha ‘-1m’, Tambien se puede usar las mismas opciones que maxDate

El resultado es un datepicker personalizado:

Descarga el ejemplo completo en:

Descargar Archivos

Sigueme en G+