在日期选择器中禁用过去的日期并仅启用某些未来日期
Disable past dates and enable only certain future dates in datepicker
我正在尝试使用 jQuery
日期选择器,但希望禁用所有过去的日子,只允许未来的星期四。我可以让它允许星期四,但我添加的 minDate
功能不适用于它。这是我的代码:
<script>
jQuery(document).ready(function() {
jQuery('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];}
});
});
$(function () {
$("#input_40_4'").datepicker({ minDate: 0 });
});
</script>
有人可以解释为什么这些不能一起工作吗?
您可以向 datepicker
添加更多选项,方法是用逗号分隔它们。
$(document).ready(function() {
$('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate : 0
// you can add more options here as well, just seperate them by commas
});
});
它们在您的问题中不起作用的原因是因为您将使用 documentReady 部分中的日期选择器的选项覆盖第 10 行函数中创建的日期选择器的选项。
你基本上是说用 mindate:0 创建一个新的日期选择器,没关系创建一个只有星期二的新日期选择器。
您正在用第二次调用覆盖第一次日期选择器调用的效果。
将两个选项放在一个选项对象中
$("#input_40_4'").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
演示
$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />
$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 3, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />
我正在尝试使用 jQuery
日期选择器,但希望禁用所有过去的日子,只允许未来的星期四。我可以让它允许星期四,但我添加的 minDate
功能不适用于它。这是我的代码:
<script>
jQuery(document).ready(function() {
jQuery('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];}
});
});
$(function () {
$("#input_40_4'").datepicker({ minDate: 0 });
});
</script>
有人可以解释为什么这些不能一起工作吗?
您可以向 datepicker
添加更多选项,方法是用逗号分隔它们。
$(document).ready(function() {
$('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate : 0
// you can add more options here as well, just seperate them by commas
});
});
它们在您的问题中不起作用的原因是因为您将使用 documentReady 部分中的日期选择器的选项覆盖第 10 行函数中创建的日期选择器的选项。
你基本上是说用 mindate:0 创建一个新的日期选择器,没关系创建一个只有星期二的新日期选择器。
您正在用第二次调用覆盖第一次日期选择器调用的效果。
将两个选项放在一个选项对象中
$("#input_40_4'").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
演示
$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />
$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 3, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />