从html datepicker jquery禁用特定日期
Posted
技术标签:
【中文标题】从html datepicker jquery禁用特定日期【英文标题】：disabling specific dates from html datepicker jquery 【发布时间】：2015-07-31 15:07:57 【问题描述】：大家好，我正在尝试在我的网页中设置一个日期选择器并禁用其中的一些日期，以便它无法显示 这是代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/external/jquery/jquery.js" ></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script>
/** Days to be disabled as an array */
var disableddates = ["20-5-2015", "12-11-2014", "12-25-2014", "12-20-2014"];
function DisableSpecificDates(date)
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++)
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1)
return [false];
$(function ()
$("#date").datepicker(
beforeShowDay: DisableSpecificDates
);
);
</script>
</head>
<body>
<input id="date" type="text">
</body>
</html>
但由于某种原因它无法正常工作...日期选择器甚至不显示 有人可以帮忙吗
【问题讨论】：
请发布出现在您的控制台上的 javascript 错误。您是否尝试使用 Chrome 中的开发者工具或类似工具？ 【参考方案1】：试试这个，在下面运行这个代码。第一个日期我在当天添加了一个 0，以便它与比较中的格式匹配。
/** Days to be disabled as an array */
var disableddates = ["20-05-2015", "12-11-2014", "12-25-2014", "12-20-2014"];
function DisableSpecificDates(date)
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
/*
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y ;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++)
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1 )
return [false];
*/
$(function()
$("#date").datepicker(
beforeShowDay: DisableSpecificDates
);
);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<input id="date" type="text">
</body>
</html>【讨论】：
这甚至不打开日期选择器【参考方案2】：这个答案是基于 Thomas 的答案，这里我在PrepareDate 的DisableSpecificDates 函数中添加了noweekends 功能，以便在beforeShowDay 中使用，例如：beforeShowDay:PrepareDate
function DisableSpecificDates(date)
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
function PrepareDate(date)
if ($.datepicker.noWeekends(date)[0])
return DisableSpecificDates(date);
else
return $.datepicker.noWeekends(date);
【讨论】：
【参考方案3】：一周中的禁用日
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker11'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function ()
$('#datetimepicker11').datetimepicker(
daysOfWeekDisabled: [0, 6]
);
);
</script>
</div>
【讨论】：
以上是关于从html datepicker jquery禁用特定日期的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI Datepicker - 如何动态禁用特定日期
JQuery UI Datepicker - MaxDate 排除禁用天数