¿Se puede hacer el jQuery UI Datepicker para deshabilitar los sábados y domingos (y feriados)?


193

Yo uso un selector de fechas para elegir un día de cita. Ya configuré el intervalo de fechas para que sea solo para el próximo mes. Eso funciona bien Quiero excluir los sábados y domingos de las opciones disponibles. Se puede hacer esto? ¿Si es así, cómo?

Respuestas:


243

Existe la beforeShowDayopción, que requiere que se invoque una función para cada fecha, que devuelve verdadero si la fecha está permitida o falso si no lo está. De los documentos:


beforeShowDay

La función toma una fecha como parámetro y debe devolver una matriz con [0] igual a verdadero / falso que indica si esta fecha es seleccionable o no y 1 igual a un nombre (s) de clase CSS o '' para la presentación predeterminada. Se llama para cada día en el selector de fecha antes de que se muestre.

Mostrar algunos feriados nacionales en el selector de fechas.

$(".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, ''];
}

Existe una función integrada, llamada noWeekends, que impide la selección de días de fin de semana.

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })

Para combinar los dos, puede hacer algo como (asumiendo la nationalDaysfunción desde arriba):

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

Actualización : Tenga en cuenta que a partir de jQuery UI 1.8.19, la opción beforeShowDay también acepta un tercer paremeter opcional, una información emergente emergente


2
Gracias por esto, no pude encontrar este método en los documentos en ninguna parte.
Neil Aitken

2
Excelente solución. particularmente como cuán concisa es su explicación. @Neil: dev.jqueryui.com/ticket/5851
Kaushik Gopal

Sin Uncaught TypeError: Cannot read property 'noWeekends' of undefinedembargo
LewisJWright

Si ya lo ha instanciado, puede actualizar la opción: $ ('# selector'). datepicker ('opción', 'beforeShowDay', $ .datepicker.noWeekends);
Marcaum54

42

Si no desea que aparezcan los fines de semana, simplemente:

CSS

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

1
Para ocultar los días por completo pero mostrar los encabezados y los espacios en blanco:td.ui-datepicker-week-end { visibility: hidden; }
Vael Victus

Esta es una forma muy ordenada de excluir los fines de semana.
itsdarrylnorris

Gracias, muy agradable :)
Fox

26

Estas respuestas fueron muy útiles. Gracias.

Mi contribución a continuación agrega una matriz donde varios días pueden devolver falso (estamos cerrados todos los martes, miércoles y jueves). Y incluí las fechas específicas más los años y las funciones sin fines de semana.

Si desea descansar los fines de semana, agregue [Sábado], [Domingo] a la matriz de días cerrados.

$(document).ready(function(){

    $("#datepicker").datepicker({
        beforeShowDay: nonWorkingDates,
        numberOfMonths: 1,
        minDate: '05/01/09',
        maxDate: '+2M',
        firstDay: 1
    });

    function nonWorkingDates(date){
        var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
        var closedDates = [[7, 29, 2009], [8, 25, 2010]];
        var closedDays = [[Monday], [Tuesday]];
        for (var i = 0; i < closedDays.length; i++) {
            if (day == closedDays[i][0]) {
                return [false];
            }

        }

        for (i = 0; i < closedDates.length; i++) {
            if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
                return [false];
            }
        }

        return [true];
    }




});

3
Podrías editar tu respuesta anterior, en lugar de publicar una nueva, incluir ambas en la misma respuesta, dado lo similares que son, o simplemente eliminar la anterior y dejar la mejor versión
Yi Jiang,


13

La solución aquí que a todos les gusta parece muy intensa ... personalmente, creo que es mucho más fácil hacer algo como esto:

       var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
            "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
            "11/29/2013", "12/24/2013", "12/25/2013"];

       $( "#requestShipDate" ).datepicker({
            beforeShowDay: function(date){
                show = true;
                if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
                for (var i = 0; i < holidays.length; i++) {
                    if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
                }
                var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
                return display;
            }
        });

De esta manera, tus citas son legibles por humanos. No es realmente tan diferente, solo tiene más sentido para mí de esta manera.


6

Esta versión del código hará que obtenga las fechas de vacaciones de la base de datos sql y deshabilite la fecha especificada en el Selector de fechas de la interfaz de usuario


$(document).ready(function (){
  var holiDays = (function () {
    var val = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'getdate.php',
        'success': function (data) {
            val = data;
        }
    });
    return val;
    })();
  var natDays = holiDays.split('');

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (var i = 0; i  natDays.length-1; i++) {
    var myDate = new Date(natDays[i]);
      if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
      {
        return [false];
      }
    }
    return [true];
  }

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $("#shipdate").datepicker({
      minDate: 0,
      dateFormat: 'DD, d MM, yy',
      beforeShowDay: noWeekendsOrHolidays,
      showOn: 'button',
      buttonImage: 'images/calendar.gif', 
      buttonImageOnly: true
     });
  });
});

Cree una base de datos en sql y ponga sus fechas de vacaciones en formato MM / DD / AAAA como Varchar Coloque el contenido a continuación en un archivo getdate.php


[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]

Feliz codificación !!!! :-)


5

Puede usar la función noWeekends para deshabilitar la selección de fin de semana

  $(function() {
     $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
     });
     });

4
$("#selector").datepicker({ beforeShowDay: highlightDays });

...

var dates = [new Date("1/1/2011"), new Date("1/2/2011")];

function highlightDays(date) {

    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i] == 0) {
            return [true,'', 'TOOLTIP'];
        }
    }
    return [false];

}

2

En esta versión, mes, día y año determina qué días bloquear en el calendario.

$(document).ready(function (){
  var d         = new Date();
  var natDays   = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (i = 0; i < natDays.length; i++) {
      if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
      {
        return [false];
      }
    }
    return [true];
  }
  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $(".datepicker").datepicker({

      minDate: new Date(d.getFullYear(), 1 - 1, 1),
      maxDate: new Date(d.getFullYear()+1, 11, 31),

      hideIfNoPrevNext: true,
      beforeShowDay: noWeekendsOrHolidays,
     });
  });
});

0

para días incapacitantes puedes hacer algo como esto. <input type="text" class="form-control datepicker" data-disabled-days="1,3">donde 1 es lunes y 3 es miércoles


0

En la última versión de Bootstrap 3 (bootstrap-datepicker.js) beforeShowDayespera un resultado en este formato:

{ enabled: false, classes: "class-name", tooltip: "Holiday!" }

Alternativamente, si no le importa el CSS y la información sobre herramientas, simplemente devuelva un booleano falsepara que la fecha no sea seleccionable.

Además, no existe $.datepicker.noWeekends, por lo que debe hacer algo similar a esto:

var HOLIDAYS = {  // Ontario, Canada holidays
    2017: {
        1: { 1: "New Year's Day"},
        2: { 20: "Family Day" },
        4: { 17: "Easter Monday" },
        5: { 22: "Victoria Day" },
        7: { 1: "Canada Day" },
        8: { 7: "Civic Holiday" },
        9: { 4: "Labour Day" },
        10: { 9: "Thanksgiving" },
        12: { 25: "Christmas", 26: "Boxing Day"}
    }
};

function filterNonWorkingDays(date) {
    // Is it a weekend?
    if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
        return { enabled: false, classes: "weekend" };
    // Is it a holiday?
    var h = HOLIDAYS;
    $.each(
        [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
        function (i, x) {
            h = h[x];
            if (typeof h === "undefined")
                return false;
        }
    );
    if (h)
        return { enabled: false, classes: "holiday", tooltip: h };
    // It's a regular work day.
    return { enabled: true };
}

$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });

0

Para el sábado y el domingo, puedes hacer algo como esto

             $('#orderdate').datepicker({
                               daysOfWeekDisabled: [0,6]
                 });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.