首页 > 文章 > 前端

jQuery月年选择器使用教程

时间：2025-11-11 14:45:37 286浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《jQuery日期选择器仅选月年教程》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

使用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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
jQuery UI 核心库: https://code.jquery.com/ui/1.13.2/jquery-ui.min.js
jQuery UI 基础主题CSS: https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css

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

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

<!-- 引入 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>
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;f_date&quot; id=&quot;datepicker1&quot; required /&gt;
</div>
<div class="col-lg-3 col-sm-12">
  <h4><b>结束日期 :</b></h4>
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;t_date&quot; id=&quot;datepicker2&quot; required/&gt;
</div>

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

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

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

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

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