javascript - rango - Cómo limitar los días disponibles en jquery ui selector de fecha

jquery datepicker events

Question

Necesito limitar el selector de fechas de jquery ui para que los futuros martes y jueves sean días seleccionables. ¿Cómo puedo lograr esto?

Answer 1

Proporcione un controlador onSelect al selector de fecha y haga que su controlador valide que las fechas se ajusten a sus criterios definidos. No estoy seguro de dónde se desactiva el onSelect, por lo que puede haber "deshacer" la selección si no puede detener el evento y alertar al usuario.

Una forma de hacerlo sería desarrollar una clase de validación de fecha personalizada que tome parámetros y luego llame a ese validador de fecha de la función onSelect. La función onSelect podría ocuparse de interactuar con el datepicker para mantener el diseño limpio.

Desde http://docs.jquery.com/UI/Datepicker/datepicker#options

$("div.selector").datepicker({
onSelect: function(dateText) {
alert(dateText);
}
})

Para cambiar la visualización y la posibilidad de seleccionar una fecha o conjunto de días en particular, use un controlador beforeShowDay y haga que cambie la selección y el CSS para la fecha en cuestión.

$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, ''au''], [2, 6, ''nz''], [3, 17, ''ie''],
[4, 27, ''za''], [5, 25, ''ar''], [6, 6, ''se''],
[7, 4, ''us''], [8, 17, ''id''], [9, 7, ''br''],
[10, 1, ''cn''], [11, 22, ''lb''], [12, 12, ''ke'']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + ''_day''];
}
}
return [true, ''''];
}

Answer 2

Todo está en la documentación. La función BeforeShowDay hará lo que quieras.

http://api.jqueryui.com/datepicker/#option-beforeShowDay

Mi uso fue días diferentes, pero terminé con beforeShowDay llamando a mi función de días límite

function limitDays(date){
var day = date.getDay();
// Only make Mon, Tues, and Thurs selectable
if(day == 1 || day == 2 || day == 4){
return [true, ''''];
}else{
return [false, ''''];
}
}