如何使某些日期在 html 日期表单中不可用
How to make certain dates unavailable within html date form
我有一张预订表,其中有日期表。我想禁用 booked/unavailable 的某些日子。我有 JavaScript 代码,但在我的情况下不起作用。有没有其他方法可以帮助我禁用日历中的日期?
var array = ["2019-03-14", "2019-03-11", "2019-03-26"];
$(function () {
$('input').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="form-group">
<label for="date">Book your date</label>
<input type="date" name="date" class="form-control" placeholder="" required readonly>
</div>
请在 <head> </head>
:
之间的任意位置添加
<!-- datepicker -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- //datepicker -->
您的代码似乎运行良好。我在下面唯一改变的是:
- 添加了
yy-mm-dd
的 dateFormat
选项,因为这是 <input type="date">
要求的格式,
- 将输入标记为
readonly
,因此它只能通过 popin 进行修改(请注意,这可能不是理想的可访问性)。
var array = ["2019-03-14", "2019-03-11", "2019-03-26"];
$(function () {
$('input').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="form-group">
<label for="date">Book your date</label>
<input type="date" name="date" class="form-control" placeholder="" required readonly>
</div>
我有一张预订表,其中有日期表。我想禁用 booked/unavailable 的某些日子。我有 JavaScript 代码,但在我的情况下不起作用。有没有其他方法可以帮助我禁用日历中的日期?
var array = ["2019-03-14", "2019-03-11", "2019-03-26"];
$(function () {
$('input').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="form-group">
<label for="date">Book your date</label>
<input type="date" name="date" class="form-control" placeholder="" required readonly>
</div>
请在 <head> </head>
:
<!-- datepicker -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<!-- //datepicker -->
您的代码似乎运行良好。我在下面唯一改变的是:
- 添加了
yy-mm-dd
的dateFormat
选项,因为这是<input type="date">
要求的格式, - 将输入标记为
readonly
,因此它只能通过 popin 进行修改(请注意,这可能不是理想的可访问性)。
var array = ["2019-03-14", "2019-03-11", "2019-03-26"];
$(function () {
$('input').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="form-group">
<label for="date">Book your date</label>
<input type="date" name="date" class="form-control" placeholder="" required readonly>
</div>