如何禁用所选日期之前的所有日期？ [复制]答案

【问题标题】：How to disable all the dates that comes before the selected date? [duplicate]如何禁用所选日期之前的所有日期？ [复制]
【发布时间】：2013-10-17 05:38:32
【问题描述】：

我是 Jquery 的新手，我正在开发一个酒店应用程序，允许用户选择“入住”和“退房”日期，我正在使用 datepicker 对于这些领域。从逻辑上讲，“退房”日期可以等于或大于“入住”日期。我已经编写了一个可以检查此条件的验证，但我想在 UI 上限制用户，选择仅等于或大于“check-”的“结帐”日期in' 日期，通过禁用所有在日期选择器中的'check-in' 之前的日期 'check-out'.. 我浏览了很多，但是这个标准没有运气。

Jquery UI datepicker. Disable array of Dates

我已经提到了上面的内容，但问题是，他们定义了一个小的日期数组，他们禁用了选择。但是，就我而言，我想在“退房”日期选择器中禁用“入住”日期之前的所有日期。

我该怎么做？谁能帮帮我......

在此先感谢....

【问题讨论】：

标签： jquery jquery-ui date datepicker jquery-ui-datepicker

【解决方案1】：

阅读date range with DEMO

$(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});

HTML

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

也读

http://api.jqueryui.com/datepicker/#option-minDate

http://api.jqueryui.com/datepicker/#option-maxDate

http://api.jqueryui.com/datepicker/#option-onClose

【讨论】：

您好 Tushar，演示链接非常好。这就是我所需要的。但在我的情况下，它没有按预期工作。你能告诉我是否有任何脚本文件是特定于这种功能的吗？
@user2771399 你需要包括jQuery Library和jQueryUI Library
JqueryUI 库也是必须的吗？在 jsfiddle 中尝试时，该演示仅适用于 jquery-1.9.1..？
是的，它必须展示你的小提琴？
你好 Tushar，我的问题是，我已经绑定了 datepicker 来设置日期的样式，所以当我再次将它与这个“从和到”日期绑定时，我没有得到它.感谢您的演示链接。这是一个很好的帮助。

【解决方案2】：

将您选择的日期设置为像这样

$( ".selector" ).datepicker({ minDate: 'selected-date' });

它将禁用最小日期之前的所有日期。

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="check-in"></div>
<div id="check-out"></div>
<script>
    $( "#check-out" ).datepicker({
    minDate: new Date()
});

$( "#check-in" ).datepicker({
    minDate: new Date(),
    onSelect: function(dateText, inst) {
        var selectedDate = $( this ).datepicker( "getDate" );
        $( "#check-out" ).datepicker( "option", "minDate", selectedDate );
    }
});
</script>
</body>
</html>

【讨论】：

selected-date 是关键字吗？还是我应该在 Harish 的某个地方设置它的值？
您可以从签到获取所选日期 $(".checkin[name=checkin]").datepicker('getDate');并将“选定日期”替换为选定日期