Respuestas:
Existe la beforeShowDay
opción, que requiere que se invoque una función para cada fecha, que devuelve verdadero si la fecha está permitida o falso si no lo está. 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 o no y 1 igual a un nombre (s) de clase CSS o '' para la presentación predeterminada. Se llama para cada día en el selector de fecha antes de que se muestre.
Mostrar algunos feriados nacionales en el selector de fechas.
$(".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, puede hacer algo como (asumiendo la nationalDays
función desde 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 opción beforeShowDay también acepta un tercer paremeter opcional, una información emergente emergente
Uncaught TypeError: Cannot read property 'noWeekends' of undefined
embargo
Si no desea que aparezcan los fines de semana, simplemente:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
td.ui-datepicker-week-end { visibility: hidden; }
Estas respuestas fueron muy útiles. Gracias.
Mi contribución a continuación agrega una matriz donde varios días pueden devolver falso (estamos cerrados todos los martes, miércoles y jueves). Y incluí las fechas específicas más los años y las funciones sin fines de semana.
Si desea descansar los fines de semana, agregue [Sábado], [Domingo] a la matriz de días cerrados.
$(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];
}
});
¡Datepicker tiene esta funcionalidad incorporada!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
La solución aquí que a todos les gusta parece 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, tus citas son legibles por humanos. No es realmente tan diferente, solo tiene más sentido para mí de esta manera.
Esta versión del código hará que obtenga las fechas de vacaciones de la base de datos sql y deshabilite la fecha especificada en el Selector de fechas de la interfaz de usuario
$(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 / AAAA como Varchar Coloque el contenido a continuación 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]
Feliz codificación !!!! :-)
$("#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];
}
En esta versión, mes, día y año determina 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,
});
});
});
para días incapacitantes 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
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 le importa el CSS y la información sobre herramientas, simplemente devuelva un booleano false
para que la fecha no sea seleccionable.
Además, no existe $.datepicker.noWeekends
, por lo que debe hacer algo similar a 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 });
Para el sábado y el domingo, puedes hacer algo como esto
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});