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, ''''];
  }
}