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:
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>
Hola Victor gracias por tu aporte.
No obstante te quería preguntar que yo tengo el calendario desactivado las fechas atrasadas. Decirte que también lo tengo en castellano. No se si podrías poner el calendario en formato en español?
Gracias y un saludo
Hola José Manuel, muchas gracias por participar. Lo publico para que te podamos ayudar entre todos. Saludos!
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»,
});
})
}
});
});
muito obrigado por compartilhar o conhecimento, procurava há tempos essa solução.
[]s
Gracias Victor
Genial Juan José. Un saludo, Víctor
Saludos: Victor soy nuevo manejando wordpress, como agrego el código del calendario y a la vez cambiar la sigla X que denomina el día miércoles gracias de antemano por tu apoyo
Migue Torres publicado recientemente..Juan Barahona se niega entregar candidatura en beneficio del PAC
Hola Migue, muchas gracias por participar. Publico tu pregunta y espero poder ayudarte entre todos.
Un saludo, Víctor
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?
Hola Camilo, gracias por participar. Lo estudiamos y entre todos te respondemos. Un saludo!
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
Hola Paola, gracias por participar. Respecto a las personalizaciones en Datepicker las vamos a investigar entre todos y te comentamos.
Saludos, Víctor
minDate: «0D», //el minimo dia habilitado
maxDate: «+2M, -10D», Establece el maxido dia habilitado
Buenos días Carlos David, y muchas gracias por colaborar.
Un saludo, Víctor
Hola a todos, como obtengo habilitado solo el ultimo día de cada mes en el datepickers Jquery. Gracias de ante mano. Saludos.
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: https://biolucas.com/como-habilitar-el-ultimo-dia-de-cada-mes-en-datepicker-de-jquery/
Espero que te sirva, saludos!
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 ^^
Hola José Antonio!, gracias por tu aportación, seguro que será de utilidad para muchas personas ;D.
Un saludo, Víctor
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! 😀
Me sirvio demasiado, me puedes explicar como podrias deshabilitar algunos dias especificos, oscea los feriados, es urgente gracias.