Cómo desactivar los sábados y domingos del calendario en datepicker de Jquery

Si queremos desactivar en el calendario los días del fin de semana, sábado y domingo, tenemos que incluir este script en el head de nuestro página web:

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

Aplicando esté código tendríamos lo siguiente:

Jquery desactivar datepicker sabados y domingos

Aquí está todo el código completo para que funcione en un archivo html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
  <script>
  $(function() {
   $('#txtDate').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});
</script>
</head>
<body>
Fecha: <input type='text' id='txtDate' />
</body>
</html>

Publicado por

victor

Hola!. Me llamo Víctor y soy Ingeniero Agrónomo de formación y programador web de profesión (desde el año 2006). Por otra parte me gusta, entre otras aficiones, el senderismo, jugar al futbol y al FIFA en la PS4. Te animo a participar en mi web www.biolucas.com

18 comentarios en «Cómo desactivar los sábados y domingos del calendario en datepicker de Jquery»

  1. Hola, Saludos, estoy trabajando con calendarios de datepiker, el asunto es que estoy haciendo un cotizador y reserva de un servicio.
    Si el usuario escoge de un Select la opcion 1 me debería mostrar los fines de semana habilitados, si escoge la opción 2 me debería desestabilizar los fines de semana

    $(function () {

    $(‘#day_selected’).on(‘change’, function () {
    if ($(this).prop(‘value’) == 2) {

    $(this).prop(‘value’, function(){
    console.log($(this).prop(‘value’) )
    $(‘#data_1 .input-group.date’).datepicker({
    todayBtn: «linked»,
    keyboardNavigation: false,
    forceParse: true,
    calendarWeeks: true,
    autoclose: false,
    multidate: true,
    multidateSeparator: «,»,
    format: «DD dd/mm/yyyy»,
    startDate: moment().format(«dddd D / M / YYYY»),
    });
    })
    } else {
    $(this).prop(‘value’, function () {
    console.log($(this).prop(‘value’) + «fuera del valor 4»)
    $(‘#data_1 .input-group.date’).datepicker({
    todayBtn: «linked»,
    keyboardNavigation: false,
    forceParse: true,
    calendarWeeks: true,
    autoclose: false,
    multidate: true,
    multidateSeparator: «,»,
    daysOfWeekDisabled: [0, 6],
    startDate: moment().format(«dddd D / M / YYYY»),
    format: «DD dd/mm/yyyy»,
    });
    })
    }
    });
    });

  2. Hola y si quiero tener un datepicker que me desabilite todos los dias pasados hasta hoy y que ademas me deje desabilitar los dias que yo quiera despues de la fecha de hoy

    1. Hola Paola, gracias por participar. Respecto a las personalizaciones en Datepicker las vamos a investigar entre todos y te comentamos.
      Saludos, Víctor

  3. Perdón, hay un pequeño error en un comentario (el primero concretamente):

    Pone «fechas restingidas a miércoles y viernes» cuando debería poner «fechas restringidas a miércoles y sábados

    Saludos ^^

  4. Yo estoy trabajando ahoar mismo con un calendario y he conseguido bloquear tanto determinados días de la semana como días concretos, pudiendo habilitar los días que te parezcan convenientes y deshabilitar días del mismo modo. Dejo el código aquí:


    //Fechas restringidas a miércoles y viernes. Habilitación y deshabilitación de fechas.
    var fechasHabilitadas = [""]; //Formato de fecha: ["8-7-2015","9-7-2015"];
    var fechasDeshabilitadas = [""];

    $(function()
    {
    $('#fecha').datepicker({ beforeShowDay:
    function(dt)
    {
    return [deshabilitada(dt) && (dt.getDay() == 3 || dt.getDay() == 6 || habilitada(dt)), "" ];
    }
    , changeMonth: true, changeYear: false});
    });

    function habilitada(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
    if ($.inArray(dmy, fechasHabilitadas) != -1) {
    return true;
    } else {
    return false;
    }
    }

    function deshabilitada(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
    if ($.inArray(dmy, fechasDeshabilitadas) != -1) {
    return false;
    } else {
    return true;
    }
    }

    Espero que sirva de ayuda a alguien, ¡saludos! 😀

  5. Me sirvio demasiado, me puedes explicar como podrias deshabilitar algunos dias especificos, oscea los feriados, es urgente gracias.

Responder a José Antonio Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

CommentLuv badge