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 sobre “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.

Deja un comentario

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

*

CommentLuv badge