jQuery datepicker- 2 个输入文本框和限制范围

JS

使用jQuery datepicker插件可以轻松地为网页上的输入框添加日期选择功能。这对于需要用户输入日期的表单非常有用。本文将介绍如何使用这个插件来创建两个输入框，并限制日期选择的范围。

首先，我们需要在网页中引入jQuery库和datepicker插件的脚本文件。这样我们就可以使用它们提供的功能了。以下是引入这些文件的代码：

html
<script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.CSS">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.JS"></script>

接下来，在页面中添加两个输入框，用于用户选择日期。我们可以使用HTML的input元素来创建这些输入框，并为它们添加一个唯一的id属性。以下是示例代码：

html
<input type="text" id="start-date" placeholder="请选择开始日期">
<input type="text" id="end-date" placeholder="请选择结束日期">

现在，我们需要编写一些JavaScript代码来初始化datepicker插件，并将其应用于这两个输入框。我们可以使用jQuery的选择器来选中这些输入框，并使用datepicker()方法来初始化它们。以下是示例代码：

Javascript
$(document).ready(function(){
  $("#start-date").datepicker();
  $("#end-date").datepicker();
});

通过这些代码，我们已经成功地将datepicker插件应用到了输入框上。用户现在可以点击输入框旁边的图标来选择日期。但是，我们还需要限制日期选择的范围，以确保用户只能选择有效的日期。

为了限制日期选择的范围，我们可以使用datepicker插件提供的minDate和maxDate选项。minDate选项可以设置最小可选择的日期，而maxDate选项可以设置最大可选择的日期。以下是示例代码：

Javascript
$(document).ready(function(){
  $("#start-date").datepicker({
    minDate: 0, // 今天及以后的日期可选
    maxDate: "+1M" // 一个月后的日期不可选
  });
  $("#end-date").datepicker({
    minDate: 0, // 今天及以后的日期可选
    maxDate: "+1M" // 一个月后的日期不可选
  });
});

通过设置minDate为0，我们确保了用户只能选择今天及以后的日期。而设置maxDate为"+1M"，则限制了用户只能选择一个月内的日期。

添加限制范围的标题

在上述代码中，我们使用了minDate和maxDate选项来限制日期选择的范围。这样可以确保用户只能选择有效的日期，而无法选择过去的日期或超出预定范围的日期。这在一些表单中非常有用，比如酒店预订或机票预订等。通过限制日期选择的范围，我们可以提高用户体验，避免错误的输入和不必要的麻烦。

案例代码

下面是完整的案例代码，包括引入库文件、创建输入框和初始化datepicker插件的代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>限制日期选择范围的案例</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.CSS">
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.JS"></script>
  <script>
    $(document).ready(function(){
      $("#start-date").datepicker({
        minDate: 0, // 今天及以后的日期可选
        maxDate: "+1M" // 一个月后的日期不可选
      });
      $("#end-date").datepicker({
        minDate: 0, // 今天及以后的日期可选
        maxDate: "+1M" // 一个月后的日期不可选
      });
    });
  </script>
</head>
<body>
  <h1>日期选择示例</h1>
  <input type="text" id="start-date" placeholder="请选择开始日期">
  <input type="text" id="end-date" placeholder="请选择结束日期">
</body>
</html>

通过将以上代码保存为一个HTML文件，并在浏览器中打开，你就可以看到两个带有日期选择功能的输入框。同时，用户只能选择今天及以后的日期，并且不能选择一个月后的日期。这样，我们就成功地使用datepicker插件创建了带有限制范围的日期选择输入框。