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

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.

Deja un comentario