Javascript 从 html datepicker jquery 禁用特定日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30331543/
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
disabling specific dates from html datepicker jquery
提问by zouzou b lebiane
hey guys i am trying to set a datepicker in my webpage and disable some dates from it so it can't be showing
this is the code:
嘿伙计们，我正在尝试在我的网页中设置一个日期选择器并从中禁用一些日期，因此它无法显示
这是代码：
<!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>
but it is not working for some reason... the date picker don't even show can someone plz help
但由于某种原因它不起作用......日期选择器甚至不显示有人可以帮忙吗
回答by Allen Tellez
Try this, run this code below. The first date I added a 0 to the day so that it will match the formatting in the comparison.
试试这个，运行下面的代码。第一个日期我在当天添加了一个 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>回答by Shocked
This answer is based on Thomas' answer, here I have added noweekendsfunctionality to DisableSpecificDatesfunction in PrepareDate, to use in beforeShowDaylike: beforeShowDay:PrepareDate
这个答案基于 Thomas 的答案，在这里我添加了noweekends功能以DisableSpecificDates在 中运行PrepareDate，以在以下情况下使用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);
}
}回答by Pullat Junaid
Disabled Days of the Week
每周的残疾人日
<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>
