Pregunta Datepicker para la página web que solo permite hacer clic en fechas específicas


¿Hay un Javascript o alguna biblioteca que crearía un datepicker para una página web (similar a Jquery UI DatePicker eso solo permitiría hacer clic y resaltar ciertas fechas.

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


16
2017-12-11 19:41


origen


Respuestas:


El evento Datepicker beforeShowDay () está destinado para 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 de fecha dada en la devolución de llamada es una instancia de un objeto Date que representa el día determinado, no 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 ¿Se puede hacer jQuery UI Datepicker para deshabilitar sábados y domingos (y festivos)?


31
2017-12-26 07:50



Al elaborar 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}}

4
2017-12-28 14:39



Puede comenzar utilizando el jquery ui datepicker. Descargue el último paquete de desarrollo y trabaje desde ui.datepicker.js. Ver _generateHTML. Busque la variable no seleccionable. Si el código del lado del servidor podría generar alguna secuencia de comandos, podría rellenar una nueva configuración que podría extender el selector de fecha para aceptar. A continuación, 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á usando jquery ui, probablemente anule el prototipo _generateHTML después de haber cargado el script de jQry UI.


3
2017-12-11 20:04



Tratar dijit.Calendar  Hay una propiedad isDisabledDate que puede establecer en 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. los getClassForDatemétodo puede ser anulado para devolver una clase CSS.


2
2017-12-12 02:09



Tal vez 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".


0
2017-12-11 20:04



Hice una aplicación así (un selector de fechas 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.


0
2017-12-11 21:43



He estado usando El mejor calendario de Javascript 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.

Se puede encontrar más información sobre las fechas de inhabilitación aquí.


0
2017-12-28 08:54