JQuery ui - datepicker，禁用特定日期
Posted
技术标签:
【中文标题】JQuery ui - datepicker，禁用特定日期【英文标题】：JQuery ui - date picker, disabling specific dates 【发布时间】：2012-04-02 07:01:22 【问题描述】：我正在尝试使用 JQuery Ui 禁用特定日期。但是，我没有运气，这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class background:#111111;
.ui-datepicker .preBooked_class span color:#999999;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
实例化日期选择器对象
<script type="text/javascript">
$(function()
$( "#iDate" ).datepicker(
dateFormat: 'dd MM yy',
beforeShowDay: checkAvailability
);
)
获取日历中要禁用的日期
var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"];
function unavailable(date)
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1)
return [true, ""];
else
return [false,"","Unavailable"];
$('#iDate').datepicker( beforeShowDay: unavailable );
</script>
</head>
<body>
<input id="iDate">
</body>
</html>
它似乎不起作用，知道我该如何解决这个问题。干杯。
【问题讨论】：
【参考方案1】：您似乎在一个输入上调用了两次datepicker。有点难以遵循您的代码，但如果您重新组织它并删除第二个 datepicker 调用，一切都应该正常：
<script type="text/javascript">
var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];
function unavailable(date)
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1)
return [true, ""];
else
return [false, "", "Unavailable"];
$(function()
$("#iDate").datepicker(
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
);
);
</script>
查看这篇文章：disable-dates-in-datepicker
【讨论】：
完美运行，一个快速的问题安德鲁。我该如何调整这一点，以便从数据库表中检索日期，而不是在数组中硬编码不可用的日期。干杯。 @bobo2000：这取决于您的服务器端技术。但我想你会在页面加载时将排除日期的数组嵌入到页面上，而不是在 JavaScript 中硬编码它们。 使用 php。我需要查询数据库然后用结果集填充数组吗？ @bobo2000：听起来是对的。虽然我对 PHP 不是很了解。听起来像是一个新问题的候选人:)
这行得通，但是如果不指定数组中的日期，我怎么能做到，它说接下来三天需要。就像如果到了明天它会像这样选择以下三个【参考方案2】：
有用的答案..如果您想禁用特定日期，您可以执行以下操作：
$scope.dateOptions =
beforeShowDay: unavailable
;
function unavailable(date)
if (date.getDay() === 0)
return [true, ""];
else
return [false, "", "Unavailable"];
以上将仅启用星期日，所有其他日子将被禁用。希望这会有所帮助。
【讨论】：
以上是关于JQuery ui - datepicker，禁用特定日期的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery UI Datepicker 中禁用未来日期
在 Jquery Ui Datepicker 中禁用今天之后的未来日期