selector de fechas para la página web que puede permitir que sólo fechas específicas que se han hecho clic

Question

¿Hay un Javascript o alguna biblioteca que crearía un selector de fechas de una página web (similar a Jquery UI DatePicker que sólo se permiten ciertas fechas que se puede hacer clic y destacaron.

Por ejemplo, en el lado del servidor, podría especificar una matriz de días para habilitar la selección.

Answer 1

El evento Datepicker beforeShowDay() está destinado exactamente a este propósito. Aquí hay un ejemplo donde el conjunto de fechas permitidas es relativamente pequeño para propósitos de ilustración. Según la cantidad de fechas que tenga y cómo se elijan, podría escribir un método que programáticamente seleccione las fechas (por ejemplo, ignorando los fines de semana, el 1 y el 15 de cada mes, etc.). O puede combinar ambas técnicas, por ejemplo eliminar fines de semana y una lista fija de vacaciones.

$(function() { 
    // this could be a static hash, generated by the server, or loaded via ajax 
    // if via ajax, make sure to put the remaining code in a callback instead. 
    var dates_allowed = { 
      '2009-12-01': 1, 
      '2009-12-25': 1, 
      '2010-09-28': 1, 
      '2011-10-13': 1 
    }; 

    $('#datepicker').datepicker({ 
     // these aren't necessary, but if you happen to know them, why not 
     minDate: new Date(2009, 12-1, 1), 
     maxDate: new Date(2010, 9-1, 28), 

     // called for every date before it is displayed 
     beforeShowDay: function(date) { 

      // prepend values lower than 10 with 0 
      function addZero(no) { 
       if (no < 10){ 
        return "0" + no; 
       } else { 
        return no; 
       } 
      } 

      var date_str = [ 
       addZero(date.getFullYear()), 
       addZero(date.getMonth() + 1), 
       addZero(date.getDate())  
      ].join('-'); 

      if (dates_allowed[date_str]) { 
       return [true, 'good_date', 'This date is selectable']; 
      } else { 
       return [false, 'bad_date', 'This date is NOT selectable']; 
      } 
     } 
    }); 
}); 

Los valores de retorno son

[0]: boolean selectable or not, 
[1]: CSS class names to apply if any (make sure to return '' if none), 
[2]: Tooltip text (optional) 

Tenga en cuenta que la variable fecha dada en la devolución de llamada es una instancia de un objeto Date que representa el día dado, no es una versión de texto de esa fecha en el formato especificado . Por ejemplo, podría generar la lista de fechas permitidas en un formato mientras visualiza las fechas en el selector de fechas en un formato diferente (por ejemplo, para no tener que transformar fechas de un DB al generar la página).

Ver también Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

Answer 2

Puede comenzar utilizando el jquery ui datepicker. Descargue el último paquete de desarrollo y trabaje desde ui.datepicker.js. Consulte _generateHTML Busque la variable no seleccionable. Si su código del lado del servidor podría generar alguna secuencia de comandos, podría completar una nueva configuración que podría extender el selector de fecha para aceptar. Luego, agregue un cheque. a esa lista de fechas válidas en esta línea donde se establece unselectable. Tenga en cuenta que parece que el selector de fechas permite las fechas ingresadas por teclado fuera del rango válido.

Si ya está utilizando jquery ui, es probable que simplemente anule el prototipo _generateHTML después de haber cargado el script jquery UI.

Answer 3

Quizás podría extender el DatePicker para permitir las fechas deshabilitadas/habilitadas ... Creo que podría eliminar el controlador de clics para las fechas deshabilitadas, haciendo que no se puedan cliquear. Luego, modifique el CSS para las fechas desactivadas y se puede "atenuar".

Answer 4

Hice una aplicación como esa (un selector de fecha basado en web con varias fechas prohibidas) usando el Calendario YUI y un montón de código personalizado. Dicho esto, hice esto antes de descubrir las maravillosas alegrías de jQuery (y el "dios, esto no es la mitad de jQuery, pero al menos usa métodos jQuery" de jQuery UI). Si tuviera que hacerlo de nuevo, definitivamente usaría jQuery UI (a pesar de sus muchas fallas) como base; mezclar bibliotecas es más complicado que lidiar con la inmadurez de jQuery UI.

Answer 5

Pruebe dijit.Calendar Hay una propiedad isDisabledDate que puede establecer en el marcado o en JavaScript para una función. Ver el segundo ejemplo. El método para deshabilitar las fechas se solicita para cada día a medida que se procesa. La función podría hacer algo como determinar si se sigue un patrón (¿es un fin de semana?) O buscarlo en una tabla estática (matriz) que proporcione desde el servidor, como días ocupados o feriados. El método getClassForDate puede anularse para devolver una clase CSS.

Answer 6

He estado usando The Coolest Javascript Calendar durante años y tiene la capacidad de desactivar algunos días del calendario. Solo compruébalo, lo estoy usando en todo tipo de proyectos ASP.NET.

Más información sobre las fechas de inhabilitación se puede encontrar here.

Answer 7

Elaborando la respuesta de Rob Van Dam, aquí hay un ejemplo de código (usando jQuery UI datepicker) para obtener fechas habilitadas usando AJAX. Uso AJAX para consultar una página de PHP que devuelve la fecha habilitada de una base de datos (porque solo quiero mostrar las fechas en las que tengo datos reales).

La idea es hacer la consulta AJAX cada vez que el usuario cambie el mes y luego almacenar las fechas habilitadas para este mes en una matriz global (allowedDates) que luego usa BeforeShowDay.

Por supuesto, podría hacer la consulta AJAX en beforeShowDay, pero esto sería bastante ineficaz debido a la gran cantidad de consultas AJAX (más de 30 por cada mes).

var allowedDates = new Object(); 

function queryAllowedDates (year, month, id) { 
    $.ajax({ 
    type: 'GET', 
    url: 'calendar_days.php', 
    dataType: 'json', 
    success: function(response) { 
     allowedDates[id] = response.allowedDates; 
    }, 
    data: {year:year,month:month}, 
    async: false 
    }); 
} 

$("#datepicker1").datepicker({ 
    dateFormat: 'dd.mm.yy', 
    changeMonth: true, 
    changeYear: true , 
    beforeShow: function (input) { 
    var currentDate = $(input).datepicker('getDate'); 
    var id = $(input).attr('id'); 
    queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id); 
    }, 
    onChangeMonthYear: function (year, month, inst) { 
    queryAllowedDates(year, month, inst.input.attr('id')); 
    }, 
    beforeShowDay: function (day) { 
    var id = $(this).attr('id'); 

    var date_str = [ 
     day.getFullYear(), 
     day.getMonth() + 1, 
     day.getDate() 
    ].join('-'); 

    if (allowedDates[id] != undefined && allowedDates[id][date_str]) { 
     return [true, 'good_date', 'This date is selectable']; 
    } else { 
     return [false, 'bad_date', 'This date is NOT selectable']; 
    } 
    } 
}); 

En este ejemplo, la página PHP devuelve una matriz JSON que contiene algo como:

{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}