Facil Datepicker con JQuery y CSS JQuery UI

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

<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>

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

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

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

<input id="date2" type="text" />

y queda de la siguiente manera:

Personalicemos más  nuestro script:

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

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+

Articulos relacionados:


7 comments on “Facil Datepicker con JQuery y CSS JQuery UI
  1. Jimy dice:

    ayudame porfavor, es q descargue todos el plugin y en el rar que baje vienen muchos efectos de este calendario, inclusive barras, menus, etc, solo quiero poner en mi web :

    el calendario de 1 mes que esta siempre visible y reslta el dia actual del visitante de mi web, por favor, estoy buscando esta solución gracias…!!

    • ticware dice:

      Hola Jimy
      es necesario subir como esta en el RAR para que no se pierdan los estilos del calendario y aparesca desconfigurado, ahora si quieres solo un mes puedes modicar el y cambiar “numberOfMonths: 2,” a “numberOfMonths:1 ” para que muestre solo 1 mes

      saludos

  2. Jimy dice:

    gracias por tu respuesta ticware, pero me parece que no entendiste mi comentario disculpa, t vuelvo a explicar,

    quiero que en mi web aparezca el calendario Visible Por Defecto, es decir que se muestra sin necesidad de crear cuadros de texto o hacer clic en algún lado,

    como en esta página a la derecha verás el datepick de un solo mes:

    http://www.munitrujillo.gob.pe/portal/

    es EXACTAMENTE lo mismo que quiero poner en mi web.

    me gustaría que por favor me indiques los pasos para obtener ese gadget en mi web que ya esta elaborado, lo quiero poner en una esquina de mi web y no se que pasos debo seguir, por ejemplo donde pongo todos los archivos del RAR que esta para descargar halla arriba, en la carpeta raíz de la web supongo,, etc etc quiero los pasos DETALLADOS para obtener ese calendario en mi web.

    te lo agradeceré mucho amigo ticware por favor espero tu respuesta, muy buenos los tutoriales, puedo decir que encontré una buena página para aprender JQUERY ya que en este espacio aun estoy en pañales, saludos amigo

  3. jimy dice:

    Hola amigo TicWare logre solucionar gracias a tu ayuda queria hacerte otra consulta porfavor mira

    use el programa “easy button and menu maker 2.3” para hacer una barra de menus y submenus desplegables, el problema que hay es que los submenus (que se despliegan hacia abajo) se deslizan obviamente con cada opcion de cada submenu pero no obedece al link que estan insertados, te detallo que los submenus solo obedecen cuando se hace click en el TEXTO de cada opcion del submenu

    debería obedecer al click en todo el recueadro de la opcion del submenu pero solo obedece cvuando se hace click EN EL TEXTO del submenu espero tu ayuda gracias

    • ticware dice:

      Si entiendo bien puedes modificar en la hoja de estilo en los elementos “a”
      seguro tienes algo asi:
      “a{ ”
      o talves esta debajo de una lista
      “li a{
      sea el caso agregale al “a” un display “block” para que rellene todo el espacio q se le asigno:

      a{display:block;}

      con eso deberia ser suficiente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.

Busqueda en el sitio
Advertisment ad adsense adlogger