jQuery UI Datepicker - 禁用特定日期

时间:2022-11-30 08:59:27

Is there any (easy) way to set the jQuery UI Datepicker to disallow selection of specific, predetermined days?

是否有任何(简单)方法来设置jQuery UI Datepicker以禁止选择特定的预定日期?

I was able to get this approach working, however, it produces a null error which prevents it from displaying in IE.

我能够使这种方法工作,但是,它产生一个空错误,阻止它在IE中显示。

'natDays[...].0' is null or not an object

'natDays [...]。0'为null或不是对象

Thanks in advance!

提前致谢!

UPDATE: Might help if I included some code, right? Anyway, most of this was taken straight from the aforementioned thread:

更新:如果我包含一些代码可能会有帮助,对吧?无论如何,大部分内容都来自前面提到的主题:

natDays = [
        [7, 23], [7, 24], [8, 13], [8, 14], 
    ];

    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, ''];
    }

    function noWeekendsOrHolidays(date) {
        var noWeekend = $.datepicker.noWeekends(date);
        if (noWeekend[0]) {
            return nationalDays(date);
        } else {
            return noWeekend;
        }
    }


    $(function() { 
        $("#datepicker").datepicker({
            inline: true,
            minDate: new Date(2009, 6, 6), 
            maxDate: new Date(2009, 7, 14), 
            numberOfMonths: 2, 
            hideIfNoPrevNext: true,
            beforeShowDay: $.datepicker.noWeekends,
            altField: '#alternate',
        }); 
    });

Thanks again!

再次感谢!

6 个解决方案

#1


9  

Have you tried declaring natDays properly with the 'var' keyword in front?

您是否尝试使用前面的'var'关键字正确声明natDays?

Also - you have an extra comma at the end of your natDays definition.

另外 - 你在natDays定义的最后有一个额外的逗号。

natDays[i][2] won't work as your the arrays only have 2 items in them - try just ''

natDays [i] [2]将不起作用,因为你的阵列中只有2个项目 - 试试''

Additionally, you'll want to set your beforeShowDay function name correctly - doesn't look like it's even calling your custom function

此外,您还需要正确设置您的beforeShowDay函数名称 - 看起来甚至不需要调用您的自定义函数

#2


14  

Here is a way to disable specific dates from being selected:

这是一种禁用特定日期的方法:

var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) < 0) {
    return [true,"","Book Now"];
  } else {
    return [false,"","Booked Out"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

Source: jQuery - Datepicker - Disable Specific Dates

来源:jQuery - Datepicker - 禁用特定日期

#3


7  

You can use the beforeShowDay option. I needed to disable any day past the 28th of the month. Here is my code.

您可以使用beforeShowDay选项。我需要在本月28日之后的任何一天禁用。这是我的代码。

$('.datepicker').datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
        var day = date.getDate();
        if (day > 28) {
            return [false];
        } else {
            return [true];
        }
    }
});

Here is more information about it: http://api.jqueryui.com/datepicker/#option-beforeShowDay

以下是有关它的更多信息:http://api.jqueryui.com/datepicker/#option-beforeShowDay

The date variable passed into the beforeShowDay callback is a JavaScript date object, so it can be formatted using various libraries, a timestamp can be retrieved using date.getTime(), etc.

传递给beforeShowDay回调的日期变量是一个JavaScript日期对象,因此可以使用各种库对其进行格式化,可以使用date.getTime()等检索时间戳。

#4


1  

beforeShowDay: $.datepicker.noWeekends,

will be

将会

beforeShowDay: noWeekendsOrHolidays,

#5


1  

The problem with IE is most probably on the following line:

IE的问题很可能在以下几行:

altField: '#alternate',
}); 

Try to remove the comma symbol and it should work.

尝试删除逗号符号,它应该工作。

#6


0  

 var unavailableDates = ["19-8-2014","14-9-2014"];

 function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
     return [true,"","Book Now"];
    } else {
  return [false,"","Booked Out"];
  }
 }

 $('#iDate').datepicker({ beforeShowDay: unavailable });

Live Demo: http://jsfiddle.net/vfod0krm/

现场演示:http://jsfiddle.net/vfod0krm/

#1


9  

Have you tried declaring natDays properly with the 'var' keyword in front?

您是否尝试使用前面的'var'关键字正确声明natDays?

Also - you have an extra comma at the end of your natDays definition.

另外 - 你在natDays定义的最后有一个额外的逗号。

natDays[i][2] won't work as your the arrays only have 2 items in them - try just ''

natDays [i] [2]将不起作用,因为你的阵列中只有2个项目 - 试试''

Additionally, you'll want to set your beforeShowDay function name correctly - doesn't look like it's even calling your custom function

此外,您还需要正确设置您的beforeShowDay函数名称 - 看起来甚至不需要调用您的自定义函数

#2


14  

Here is a way to disable specific dates from being selected:

这是一种禁用特定日期的方法:

var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) < 0) {
    return [true,"","Book Now"];
  } else {
    return [false,"","Booked Out"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

Source: jQuery - Datepicker - Disable Specific Dates

来源:jQuery - Datepicker - 禁用特定日期

#3


7  

You can use the beforeShowDay option. I needed to disable any day past the 28th of the month. Here is my code.

您可以使用beforeShowDay选项。我需要在本月28日之后的任何一天禁用。这是我的代码。

$('.datepicker').datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
        var day = date.getDate();
        if (day > 28) {
            return [false];
        } else {
            return [true];
        }
    }
});

Here is more information about it: http://api.jqueryui.com/datepicker/#option-beforeShowDay

以下是有关它的更多信息:http://api.jqueryui.com/datepicker/#option-beforeShowDay

The date variable passed into the beforeShowDay callback is a JavaScript date object, so it can be formatted using various libraries, a timestamp can be retrieved using date.getTime(), etc.

传递给beforeShowDay回调的日期变量是一个JavaScript日期对象,因此可以使用各种库对其进行格式化,可以使用date.getTime()等检索时间戳。

#4


1  

beforeShowDay: $.datepicker.noWeekends,

will be

将会

beforeShowDay: noWeekendsOrHolidays,

#5


1  

The problem with IE is most probably on the following line:

IE的问题很可能在以下几行:

altField: '#alternate',
}); 

Try to remove the comma symbol and it should work.

尝试删除逗号符号,它应该工作。

#6


0  

 var unavailableDates = ["19-8-2014","14-9-2014"];

 function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
     return [true,"","Book Now"];
    } else {
  return [false,"","Booked Out"];
  }
 }

 $('#iDate').datepicker({ beforeShowDay: unavailable });

Live Demo: http://jsfiddle.net/vfod0krm/

现场演示:http://jsfiddle.net/vfod0krm/