JQuery ui - 日期选择器,禁用特定日期
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9742289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery ui - date picker, disabling specific dates
提问by bobo2000
I am trying to disable specific dates using the JQuery Ui. However, I am having no luck, here is my code:
我正在尝试使用 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>
Instantiate datepicker object
实例化日期选择器对象
<script type="text/javascript">
$(function() {
$( "#iDate" ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: checkAvailability
});
})
Get the dates to be disabled within the calendar
获取要在日历中禁用的日期
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>
It doesn't seem to be working, any idea how I can resolve this. cheers.
它似乎不起作用,不知道我如何解决这个问题。干杯。
回答by Andrew Whitaker
It looks like you're calling datepicker
twice on one input. Its kind of hard to follow your code, but if you re-organize it and remove the second datepicker
call, everything should work:
看起来您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>
Check this article: disable-dates-in-datepicker
检查这篇文章:disable-dates-in-datepicker
回答by Deva
Helpful answer..If you want to disable a perticular day, you can do as below:
有用的答案..如果您想禁用特定的一天,您可以执行以下操作:
$scope.dateOptions = {
beforeShowDay: unavailable
};
function unavailable(date) {
if (date.getDay() === 0) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
the above will only enable Sunday and all other days will be disabled. Hope this helps.
以上只会启用星期日,所有其他日子都将被禁用。希望这可以帮助。