** Mostrar solo un día DatePicker – Jquery **

En la UI de jquery podemos encontrar widgets bastante útiles para nuestras aplicaciones web, una de ellas es el DatePicker, pero si por ejemplo necesitamos que en calendario solo se muestre un día ¿cómo le hacemos?

jqeury-calendar

Con la función “beforeShowDay” el cual recibe el objeto date después retorna un array con 3 valores:

  1. Días o día a motrar, si retornas el mismo objeto date pasado por parámetro o null el calendario se ve normal.
  2. Una clase (css) si deseas que ese espacio se pinte diferente, si es nulo, tomar la css por default
  3. *Opcional, un texto con la leyenda que deseas mostrar sobre el día, por ejemplo “Solo lunes”

quedando el código así:

$(function() {
 $( "#datepicker" ).datepicker({
 dateFormat: "dd/mm/yy",
 monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre",           "Octubre", "Noviembre", "Diciembre" ],
 dayNamesMin: [ "Do", "Lu", "Ma", "Me", "Ju", "Vi", "Sa" ],
 beforeShowDay: function(date){ 
                            return [date.getDay() == 1,"","Solo los lunes"];
                      }
 });
 });

 

Si necesitarás regresar 2 días en específico solo agrega un OR así:

beforeShowDay: function(date){ 
          return [(date.getDay() == 1 || date.getDay() == 3),"","Solo los lunes"];
 }
calendar - cambiar extensión de jpg a rar

Descarga el código aquí ,ojo es necesario cambiar la extensión de jpg a .rar

Anuncios

Un comentario en “** Mostrar solo un día DatePicker – Jquery **

  1. Es decir tendria la lista de dias en un select y al elegir el día, el datapick cambiara siguiendo los parametros enviados.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s