使用jQuery UI Datepicker实现仅选择月份和年份的教程-html教程-PHP中文网

使用jquery ui datepicker实现仅选择月份和年份的教程

本教程详细介绍了如何利用jQuery UI Datepicker组件，实现用户仅选择月份和年份的功能，而非完整的日期。文章涵盖了必要的HTML结构、CSS样式调整、JavaScript配置，特别是`onClose`回调函数的运用，以及如何集成日期范围选择逻辑。同时，强调了本地引入jQuery和jQuery UI库的步骤，以满足不使用CDN的需求。

在许多Web应用中，我们可能只需要用户选择一个特定的月份和年份，而不是具体的某一天。标准的日期选择器通常会显示日历的每一天，这在某些场景下显得过于复杂。本教程将指导您如何通过配置jQuery UI Datepicker来实现这一需求，并提供完整的代码示例。

1. 准备工作：引入必要的库文件

要使用jQuery UI Datepicker，您需要引入jQuery库和jQuery UI库（包括其CSS样式）。根据您的需求，您可以选择从CDN加载这些文件，或者下载到本地项目中使用。鉴于您不希望使用CDN，以下是下载链接和本地引入方法：

下载链接：

jQuery 核心库: https://www.php.cn/link/a6a2b3e3c6569e69afe1e025d0ff8d1f
jQuery UI 核心库: https://www.php.cn/link/6508deb7d1b89059767d5af370618046
jQuery UI 基础主题CSS: https://www.php.cn/link/b1e895366dfa5d6a2b31a21ecfc5efe3

请右键点击上述链接，选择“另存为”将文件下载到您的项目目录中（例如，js和css文件夹）。

本地引入方式： 将以下代码片段放置在您的HTML文件的<head>标签内或<body>标签底部（建议在</body>结束标签之前）。请确保文件路径与您实际存放的位置相符。

<!-- 引入 jQuery 核心库 -->
<script src="path/to/your/jquery.min.js"></script>
<!-- 引入 jQuery UI 核心库 -->
<script src="path/to/your/jquery-ui.min.js"></script>
<!-- 引入 jQuery UI 样式表 -->
<link rel="stylesheet" href="path/to/your/jquery-ui.css" />

登录后复制

例如，如果您的文件都放在与HTML文件同级的js和css文件夹中：

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />

登录后复制

2. 构建HTML结构

为了实现日期选择功能，我们需要在页面中添加用于显示和接收月份年份的输入框。这里我们以两个输入框为例，演示如何实现一个“开始月份-结束月份”的选择范围。

<div class="col-lg-3 col-sm-12">
  <h4><b>开始日期 :</b></h4>
  <input type="text" class="form-control" name="f_date" id="datepicker1" required />
</div>
<div class="col-lg-3 col-sm-12">
  <h4><b>结束日期 :</b></h4>
  <input type="text" class="form-control" name="t_date" id="datepicker2" required/>
</div>

登录后复制

这里使用了两个带有id属性的input元素（datepicker1和datepicker2），它们将作为日期选择器的目标。

3. 应用CSS样式：隐藏日期日历

为了只显示月份和年份选择器，我们需要隐藏日历中显示日期的部分。通过简单的CSS规则即可实现。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

.ui-datepicker-calendar {
  display: none;
}

登录后复制

将这段CSS代码添加到您的样式表文件（例如style.css）中，或者直接嵌入到HTML的<style>标签内。

4. JavaScript实现：配置Datepicker

核心逻辑在于jQuery UI Datepicker的初始化配置和事件处理。我们将利用changeMonth、changeYear、showButtonPanel、dateFormat以及onClose回调函数来达到目的。

$(function() {
  var startDate = new Date(); // 用于存储开始日期
  var FromEndDate = new Date(); // 用于存储结束日期

  // 初始化第一个日期选择器 (开始日期)
  $('#datepicker1').datepicker({
    changeMonth: true,          // 允许通过下拉菜单选择月份
    changeYear: true,           // 允许通过下拉菜单选择年份
    showButtonPanel: true,      // 显示按钮面板，包含“今天”和“完成”按钮
    dateFormat: 'mm-yy',        // 设置日期显示格式为“月-年”
    onClose: function(dateText, inst) {
      // 当日期选择器关闭时触发
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); // 获取选中的月份
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();   // 获取选中的年份
      // 设置输入框的值为选中的月份和年份，日期默认为该月第一天
      $(this).datepicker('setDate', new Date(year, month, 1));
    },
    onSelect: function(selectedDate) {
      // 当选择日期时触发，用于处理日期范围逻辑
      startDate = new Date(selectedDate);
      // 设置第二个日期选择器的最小可选日期
      $('#datepicker2').datepicker('option', 'minDate', startDate);
    }
  });

  // 初始化第二个日期选择器 (结束日期)
  $('#datepicker2').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'mm-yy',
    onClose: function(dateText, inst) {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, month, 1));
    },
    onSelect: function(selectedDate) {
      // 当选择日期时触发，用于处理日期范围逻辑
      FromEndDate = new Date(selectedDate);
      // 设置第一个日期选择器的最大可选日期
      $('#datepicker1').datepicker('option', 'maxDate', FromEndDate);
    }
  });
});

登录后复制

代码解析：

changeMonth: true 和 changeYear: true: 这两个选项是实现月份和年份下拉选择的关键。它们会在日期选择器顶部添加下拉菜单，允许用户直接选择月份和年份。
showButtonPanel: true: 显示一个底部面板，通常包含“今天”和“完成”按钮。在我们的场景中，虽然我们隐藏了日历，但“完成”按钮（或直接点击月份/年份选择器外部）将触发onClose事件。
dateFormat: 'mm-yy': 定义了输入框中日期的显示格式。mm代表两位数的月份，yy代表两位数的年份。您可以根据需要调整此格式（例如MM yy显示完整月份名称和年份）。
onClose: function(dateText, inst): 这是实现仅选择月份和年份的核心。当日期选择器关闭时，此回调函数会被调用。
- 我们通过$("#ui-datepicker-div .ui-datepicker-month :selected").val()和$("#ui-datepicker-div .ui-datepicker-year :selected").val()获取用户在下拉菜单中选择的月份和年份。
- 然后，使用$(this).datepicker('setDate', new Date(year, month, 1))将输入框的值设置为一个新日期对象，其中年份和月份是用户选择的，日期则固定为该月的第一天（因为我们只关心月份和年份）。
onSelect: function(selectedDate): 此回调函数在用户从日期选择器中实际选择一个日期（或在此例中，通过onClose设置了一个日期后）时触发。这里我们利用它来处理日期范围选择的逻辑：
- 当选择datepicker1时，将其值设置为datepicker2的最小可选日期。
- 当选择datepicker2时，将其值设置为datepicker1的最大可选日期。
- 请注意，原始问题和答案中使用了onChange，但对于jQuery UI Datepicker，onSelect在选择日期后触发更直接，而onChange通常用于监听输入框值的变化，可能需要额外的逻辑来确保其与Datepicker的交互。这里我们使用onSelect来确保在用户完成选择后更新日期范围限制。

5. 完整代码示例

将上述所有部分整合，您将得到一个完整的HTML文件，实现仅选择月份和年份的日期选择器，并带有日期范围限制功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery UI Datepicker 仅选择月份和年份</title>

  <!-- 引入 jQuery UI 样式表 -->
  <link rel="stylesheet" href="path/to/your/jquery-ui.css" />
  <style>
    /* 隐藏日期日历部分 */
    .ui-datepicker-calendar {
      display: none;
    }
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .col-lg-3 {
      display: inline-block;
      margin-right: 20px;
      vertical-align: top;
    }
    h4 {
      margin-bottom: 5px;
    }
    .form-control {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }
  </style>
</head>
<body>

  <div class="col-lg-3 col-sm-12">
    <h4><b>开始日期 :</b></h4>
    <input type="text" class="form-control" name="f_date" id="datepicker1" required />
  </div>
  <div class="col-lg-3 col-sm-12">
    <h4><b>结束日期 :</b></h4>
    <input type="text" class="form-control" name="t_date" id="datepicker2" required/>
  </div>

  <!-- 引入 jQuery 核心库 -->
  <script src="path/to/your/jquery.min.js"></script>
  <!-- 引入 jQuery UI 核心库 -->
  <script src="path/to/your/jquery-ui.min.js"></script>

  <script>
    $(function() {
      var startDate = new Date(); // 用于存储开始日期
      var FromEndDate = new Date(); // 用于存储结束日期

      // 初始化第一个日期选择器 (开始日期)
      $('#datepicker1').datepicker({
        changeMonth: true,          // 允许通过下拉菜单选择月份
        changeYear: true,           // 允许通过下拉菜单选择年份
        showButtonPanel: true,      // 显示按钮面板，包含“今天”和“完成”按钮
        dateFormat: 'mm-yy',        // 设置日期显示格式为“月-年”
        onClose: function(dateText, inst) {
          // 当日期选择器关闭时触发
          var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); // 获取选中的月份
          var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();   // 获取选中的年份
          // 设置输入框的值为选中的月份和年份，日期默认为该月第一天
          $(this).datepicker('setDate', new Date(year, month, 1));
        },
        onSelect: function(selectedDate) {
          // 当选择日期时触发，用于处理日期范围逻辑
          startDate = new Date(selectedDate);
          // 设置第二个日期选择器的最小可选日期
          $('#datepicker2').datepicker('option', 'minDate', startDate);
        }
      });

      // 初始化第二个日期选择器 (结束日期)
      $('#datepicker2').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm-yy',
        onClose: function(dateText, inst) {
          var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
          var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
          $(this).datepicker('setDate', new Date(year, month, 1));
        },
        onSelect: function(selectedDate) {
          // 当选择日期时触发，用于处理日期范围逻辑
          FromEndDate = new Date(selectedDate);
          // 设置第一个日期选择器的最大可选日期
          $('#datepicker1').datepicker('option', 'maxDate', FromEndDate);
        }
      });
    });
  </script>

</body>
</html>

登录后复制

请务必将path/to/your/替换为您实际存放jQuery和jQuery UI文件的路径。