本教程详细介绍了如何利用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规则即可实现。
.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文件的路径。
总结与注意事项
通过上述步骤，您已经成功地使用jQuery UI Datepicker实现了一个仅选择月份和年份的功能，并集成了日期范围限制。
- 本地文件引入: 严格按照教程下载文件并修改路径，避免CDN依赖。
- onClose的重要性: 它是实现月份/年份选择的关键，通过DOM操作获取下拉菜单的选中值并设置到输入框。
- onSelect与日期范围: onSelect回调函数用于在用户选择日期后立即更新另一个日期选择器的可选范围，确保逻辑上的连贯性。
- CSS隐藏: .ui-datepicker-calendar { display: none; }是确保日历不显示日期的视觉手段。
- 自定义: 您可以根据需要调整dateFormat来改变月份年份的显示格式，例如'MM yy'会显示完整的月份名称。
- 兼容性: jQuery UI Datepicker具有良好的浏览器兼容性，但在一些非常旧的浏览器上可能需要额外的垫片(polyfill)。
这个解决方案提供了一个灵活且可定制的方式来处理仅需月份和年份选择的场景，同时保持了jQuery UI Datepicker的强大功能。
