Question

我希望不允许用户在日期选择器中选择过去的日期

我试过这段代码但没有工作

$(function() {
  $("#startDate").datepicker({
    minDate: 0
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="startDate" name="checkin" placeholder="CHECK IN" class="datepicker">
<input type="text" id="endDate" name="checkout" placeholder="CHECK OUT" class="datepicker">

Answer 1

尝试使用如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate: 0 });
  });
  </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Answer 2

您没有为结束日期选择器调用函数。这可以正常工作。

<html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        </head>
        <body>
            <input type="text" id="startDate" name="checkin" placeholder="CHECK IN" class="datepicker">
            <input type="text" id="endDate" name="checkout" placeholder="CHECK OUT" class="datepicker">
            <script>
                $("#startDate").datepicker({
                    minDate: 0
                });
                $("#endDate").datepicker({});
            </script>
        </body>

    </html>

如何使用javascript或jquery在datepicker中禁用过去的日期

2 个答案: