Jquery Datepicker desactivar periodos de fechas

Dundee · #1 (**permalink**) 03/03/2011, 07:15

Hola gente, sigo peleándome y aprendiendo cada dia maś sobre esta magnífica API Datepicker de la UI de Jquery.
El tema es que estoy viendo esto (despúes de buscar un rato por Google):
http://jsbin.com/ezomu/edit
Y necesito desactivar un periodo de fechas , por ejemplo del 15 de marzo al 25 de julio, pero no lo consigo.
Resulta que el contenido del array dateList yo pensaba que era la fecha en formato timestamp (acostumbrado a PHP :) ) , pero he comprobado esas fechas de ejemplo y no son fechas válidas (el timestamp es demasiado pequeño, para comprobarlo online se puede entrar aquí).
¿Que es lo que contiene ese array?.
Si alguien me puede arrojar algo de luz le estaría muy agradecido.
El código de ejemplo está en esa url , pero por si acaso lo pego aquí.

Código:

var dateList = new Array();
dateList.push("20091012"); //¿ESTO QUE ES ? (NO es un timestamp válido)
dateList.push("20091019");
dateList.push("20091026");
dateList.push("20091110");

$("#dp").datepicker({
  minDate: $.datepicker.parseDate('yymmdd', dateList[0]), //this makes the datepicker start at the first available
  beforeShowDay: function(dateToShow){
    return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""];
  }

});
$("#dp2").datepicker({
  minDate: $.datepicker.parseDate('yymmdd', dateList[0]),
  maxDate: $.datepicker.parseDate('yymmdd', dateList[dateList.length-1])
});

y el HTML por si a alguien le interesa

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body class="ui-widget-content">
  <p>This will only show the dates in a given array using the beforeShowDay option.</p>
  <p>
    <input type="text" id="dp"></input>
  </p>
  <p>However, if the dates are contiguous, you may want to use the minDate and maxDate instead.<br/>
  This will prevent the datepicker from moving to months/year outside the range...
  </p>
  <p>
    <input type="text" id="dp2"></input>
  </p>
</body>
</html>

Mil gracias

marlanga · #2 (**permalink**) 03/03/2011, 07:35

El primer input-calendario establece como decha inicial (o mínima) la primera posición del array dateList.
beforeShowDay es una función que calcula para cada día del calendario si se pinta como elegible o no. Necesita devolver un TRUE o FALSE para funcionar, y si es TRUE pondrá ese día como elegible. Si te fijas, la función recibe un parámetro, dateToShow, que es la fecha exacta del día que va a calcular. Como las fechas tienen problemas de formato, el datepicker te da la función formatDate('yymmdd', dateToShow) para precisamente formatearla tal y como está en el array. En definitiva, sólo pintará como elegibles las fechas que están en el array dateList.

El segundo input-calendario es el que más te interesa. Simplemente crea un calendario cuya fecha inicial elegible es la primera posición del array, y la última fecha elegible es la última posición del array. Todos los dias que queden en medio también serán elegibles.

Dundee · #3 (**permalink**) 03/03/2011, 08:04

Cita:

Iniciado por marlanga

Si te fijas, la función recibe un parámetro, dateToShow, que es la fecha exacta del día que va a calcular.

Bueno gracias por tu explicación, sabía que hacía eso pero sigo sin entender varios puntos.

1- ¿Esas fechas en que formato estan?
Me refiero a las del array dateList.push("20091019"); , las he comprobado y no son timestamp válido.

2. ¿De donde sale el parámetro dateToShow? ¿Es una constante de la API?. En otros sitios lo he visto como date ¿es lo mismo?, me refiero a esto
function(date) en vez de function(dateToShow).

Mil gracias por la ayuda

marlanga · #4 (**permalink**) 03/03/2011, 12:28

1-La fecha es obvia, formato inglés: 2009-10-19; 19 de octubre de 2009. Los meses y dias menores de 10 hay que poner el cero delante. Ejemplo, 2 de enero de 2011: "20110102", respetando ese mismo formato.
2-No conoces el prototype de javascript... Bueno.
Dentro de la declaración del datepicker:
beforeShowDay: function(dateToShow){
return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""];
}

Esto equivale a:
function beforeShowDay(dateToShow){
return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""];
}
Pero hay que usar la forma de prototype, porque así funciona jQuery (creando objetos, programación más o menos orientada a objetos en javascript).

Espero que así lo veas mas claro. Dateshow es un argumento que se le pasa a la función, pero puedes ponerle el nombre que quieras. Sólo tienes que mirar la documentación del datepicker para mirar cuántos argumentos serán enviados a la función "beforeShowDay". En este caso, sólo uno, el día de la fecha que va a analizar si pintar como elegible o no. Como ya dije, esa función, como dice la documentación del datepicker, se ejecutará una vez por cada día que haya en el rango de fechas que hayas definido al crear el datepicker.

Dundee · #5 (**permalink**) 04/03/2011, 02:07

Cita:

Iniciado por marlanga

1-La fecha es obvia, formato inglés: 2009-10-19; 19 de octubre de 2009. Los meses y dias menores de 10 hay que poner el cero delante. Ejemplo, 2 de enero de 2011: "20110102", respetando ese mismo formato.
2-No conoces el prototype de javascript... Bueno.
Dentro de la declaración del datepicker:
beforeShowDay: function(dateToShow){
return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""];
}

Esto equivale a:
function beforeShowDay(dateToShow){
return [($.inArray($.datepicker.formatDate('yymmdd', dateToShow),dateList) >= 0), ""];
}
Pero hay que usar la forma de prototype, porque así funciona jQuery (creando objetos, programación más o menos orientada a objetos en javascript).

Espero que así lo veas mas claro. Dateshow es un argumento que se le pasa a la función, pero puedes ponerle el nombre que quieras. Sólo tienes que mirar la documentación del datepicker para mirar cuántos argumentos serán enviados a la función "beforeShowDay". En este caso, sólo uno, el día de la fecha que va a analizar si pintar como elegible o no. Como ya dije, esa función, como dice la documentación del datepicker, se ejecutará una vez por cada día que haya en el rango de fechas que hayas definido al crear el datepicker.

Ya lo he solucionado de un modo parecido pero de todas formas mil gracias por tus explicaciones ; es cierto que la fecha era obvia (pero será el cansancio pero no la vi :().
Lo de Prototype no lo sabia, no se si antes lo dije pero programo en PHP , el javascript casi lo hago por intuición , de ahí los problemas que me van surgiendo , supongo que algún dia aprenderé.

A continuación expondré la solución que hayé después de leer unos cuantos foros y posibles soluciones:
Voila ¡¡¡

El rango de fechas que queremos deshabilitar

Código:

var disabledDays = new Array();
//nota: ano es una variable dinámica que varía según el año en el que nos encontremos
var disabledDays = ["06-16-"+ano,"06-17-"+ano,"06-18-"+ano,"06-19-"+ano,"06-20-"+ano,"06-21-"+ano,"06-22-"+ano,"06-23-"+ano,"06-24-"+ano,"06-25-"+ano,"06-26-"+ano]

Mi calendario

Código:

$("#campofecha4").datepicker({

    showAnim: 'fadeIn',
   showOn: 'both',
   buttonImage: 'calendar.png',
   buttonImageOnly: true,
   minDate: new Date(<?php echo $ano?>,<?php echo $mes?>,<?php echo $diames?>),
    maxDate:'+365d',
   changeYear: true,
   numberOfMonths: 2,
   beforeShowDay: checkAvailability

   
	});

La función checkAvailability

Código:

function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";    //formato mes dia y año (se puede cambiar pero también en array
$checkdate = $.datepicker.formatDate('mm-dd-yy', mydate); //dateFormat: 'mm/mm/yy',

for(var i = 0; i < disabledDays .length; i++)
{
if(disabledDays [i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}

Gracias a tod@s.
Un saludo