javascript - language - ¿Se puede hacer jQuery UI Datepicker para deshabilitar sábados y domingos(y festivos)?

deshabilitar fechas datepicker bootstrap

Question

Uso un marcador de fecha para elegir un día de cita. Ya configuré el rango de fechas 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?

Answer 1

¡Datepicker tiene esta funcionalidad incorporada!

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

http://api.jqueryui.com/datepicker/#utility-noWeekends

Answer 2

En esta versión, el mes, el día y el año determinan 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,
});
});
});

Answer 3

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

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

Alternativamente, si no te importa el CSS y la información sobre herramientas, simplemente devuelve un valor booleano false para que la fecha no sea seleccionable.

Además, no hay $.datepicker.noWeekends , por lo que debe hacer algo $.datepicker.noWeekends 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 });

Answer 4

Esta versión de código le hará obtener las fechas de vacaciones de la base de datos sql y deshabilitará la fecha especificada en la UI Datepicker

$(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 / YYYY como Varchar. Ponga los contenidos siguientes 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]

Happy Coding !!!! :-)

Answer 5

Estas respuestas fueron muy útiles. Gracias.

Mi contribución a continuación agrega una matriz en la que varios días pueden ser falsos (estamos cerrados todos los martes, miércoles y jueves). E incluí las fechas específicas más años y las funciones de no fines de semana.

Si quiere fines de semana libres, agregue [sábado], [domingo] a la matriz closedDays.

$(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];
}
});

Answer 6

La solución aquí que a todos les gusta parece ser 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 sus fechas son legibles por humanos. En realidad, no es tan diferente, tiene más sentido para mí de esta manera.

Answer 7

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

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

Answer 8

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

CSS

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

Answer 9

para deshabilitar días 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

Answer 10

Existe la opción beforeShowDay , que toma una función para ser llamada para cada fecha, devolviendo verdadera si la fecha es permitida o falsa si no lo es. 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 y 1 igual a un nombre de clase CSS o '''' para la presentación predeterminada. Se llama para cada día en el datepicker antes de que se muestre.

Muestre algunas fiestas nacionales en el selector de fecha.

$(".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, podría hacer algo como (suponiendo que la función nationalDays de 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 1 también acepta un tercer parámetro opcional, una información emergente emergente.

Answer 11

$("#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];
}