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>

victor

Hola!. Me llamo Víctor Reyes 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 PS3. Te animo a participar en mi web www.biolucas.com

This Post Has 12 Comments

  1. Camilo Ruiz

    Hola. Me interesa el codigo pero tengo una pregunta, que pasa si a mi me dan el miercoles como dia libre y ese dia no me deben agendar nada, como hago?

    1. victor
      victor

      Hola Camilo, gracias por participar. Lo estudiamos y entre todos te respondemos. Un saludo!

  2. paola macias

    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. victor
      victor

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

    2. carlos david

      minDate: “0D”, //el minimo dia habilitado
      maxDate: “+2M, -10D”, Establece el maxido dia habilitado

      1. victor
        victor

        Buenos días Carlos David, y muchas gracias por colaborar.

        Un saludo, Víctor

  3. Giancarlo

    Hola a todos, como obtengo habilitado solo el ultimo día de cada mes en el datepickers Jquery. Gracias de ante mano. Saludos.

    1. victor
      victor

      Hola Giancarlo, muchas gracias por participar. He creado una nueva entrada en el blog para que veas como puedes habilitar sólo el último día de cada mes: http://biolucas.com/como-habilitar-el-ultimo-dia-de-cada-mes-en-datepicker-de-jquery/

      Espero que te sirva, saludos!

  4. José Antonio

    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 ^^

    1. victor
      victor

      Hola José Antonio!, gracias por tu aportación, seguro que será de utilidad para muchas personas ;D.

      Un saludo, Víctor

  5. José Antonio

    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! 😀

  6. Sergio Sanchez

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

Deja un comentario

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


*

CommentLuv badge