📌  相关文章
📜  datepicker jquery 年份范围 - Javascript (1)

📅  最后修改于: 2023-12-03 15:14:37.316000             🧑  作者: Mango

jQuery Datepicker 年份范围

简介

jQuery Datepicker 是一个流行的 JavaScript 插件，用于在网页上添加日期选择功能。其中一个常用的功能是限制可选择的年份范围。通过设置最小和最大年份，可以使用户只能在指定的年份范围内选择日期。

使用方法

首先，你需要在页面中引入 jQuery 和 jQuery Datepicker 的代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="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>

接下来，你可以使用以下代码片段来创建一个日期选择器，并限制年份范围：

$(function() {
  $("#datepicker").datepicker({
    changeYear: true,  // 允许选择年份
    yearRange: "2000:2022",  // 年份范围为 2000-2022
    dateFormat: "yy-mm-dd"  // 日期格式为 yyyy-mm-dd
  });
});

在上面的代码中，#datepicker 是一个用于显示日期的输入框的选择器。通过设置 changeYear 选项为 true，可以允许用户选择年份。yearRange 选项用于指定可选择的年份范围，格式为 "开始年份:结束年份"。dateFormat 选项用于指定日期的显示格式。

示例

以下是一个示例代码片段，演示如何使用 jQuery Datepicker 来限制年份范围：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="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>
  <script>
    $(function() {
      $("#datepicker").datepicker({
        changeYear: true,
        yearRange: "2000:2022",
        dateFormat: "yy-mm-dd"
      });
    });
  </script>
</head>
<body>
  <input type="text" id="datepicker" placeholder="选择日期">
</body>
</html>

以上代码会在页面上创建一个文本框，当用户点击该文本框时，会弹出一个日期选择器，用户只能选择 2000 年至 2022 年之间的日期。

结论

通过使用 jQuery Datepicker 插件的 yearRange 选项，你可以轻松限制用户在日期选择器中选择的年份范围。这个功能对于需要控制日期输入的网站或应用程序非常有用。

希望这个介绍对你有帮助！