本教程详细介绍了如何使用 jquery ui datepicker 实现一个仅允许选择月份和年份的日期选择器。我们将通过配置核心选项、利用 `onclose` 回调函数处理选定的月份和年份，并结合 css 隐藏日历视图，来达到这一目标。教程还包括了如何引入必要的库文件以及实现日期范围联动的逻辑，确保功能完整且用户体验良好。
在许多业务场景中，我们可能只需要用户选择一个特定的月份和年份，而非精确到某一天。jQuery UI Datepicker 提供了一套灵活的配置选项和回调机制，可以帮助我们轻松实现这一功能。本教程将引导您完成从环境准备到核心逻辑实现的所有步骤。
要使用 jQuery UI Datepicker，您需要引入以下三个核心文件：
为了避免使用 CDN，您可以右键点击以下链接并选择“另存为”将文件下载到本地项目目录中：
下载完成后，请将它们链接到您的 HTML 文件中，通常放在 head 或 body 标签的末尾：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>月份和年份选择器</title>
<!-- 引入 jQuery UI CSS -->
<link rel="stylesheet" href="path/to/jquery-ui.css" />
</head>
<body>
<!-- 您的 HTML 内容 -->
<!-- 引入 jQuery 库 -->
<script src="path/to/jquery.min.js"></script>
<!-- 引入 jQuery UI JavaScript -->
<script src="path/to/jquery-ui.min.js"></script>
<!-- 您的自定义 JavaScript 代码 -->
<script>
// Datepicker 初始化代码将放在这里
</script>
</body>
</html>请将 path/to/ 替换为实际的文件路径。
我们需要两个输入框来承载“开始日期”和“结束日期”的选择，它们将作为 Datepicker 的触发元素。
<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>
这两个 input 元素通过 id 属性 (datepicker1 和 datepicker2) 被 JavaScript 代码引用，以便初始化 Datepicker。
为了实现只选择月份和年份，我们需要隐藏 jQuery UI Datepicker 默认显示的日历天数部分。可以通过添加以下 CSS 规则来完成：
.ui-datepicker-calendar {
display: none;
}将此 CSS 代码添加到您的样式表文件（或 <style> 标签内），确保它在 jQuery UI 的默认样式之后加载，以便覆盖其默认行为。
现在是实现 Datepicker 功能的关键部分。我们将配置 jQuery UI Datepicker 的选项，并利用 onClose 回调函数来处理月份和年份的选择。
$(function() { // 确保 DOM 加载完成后执行
// 初始化日期变量
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(); // 获取选中的年份
var selectedDate = new Date(year, month, 1); // 创建一个新的日期对象，设置为选中月份的第一天
$(this).datepicker('setDate', selectedDate); // 将选择器的值设置为这个日期
// 更新第二个日期选择器的最小可选日期，实现日期范围联动
$('#datepicker2').datepicker('option', 'minDate', selectedDate);
}
});
// 配置第二个日期选择器 (结束日期)
$('#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();
var selectedDate = new Date(year, month, 1);
$(this).datepicker('setDate', selectedDate);
// 更新第一个日期选择器的最大可选日期，实现日期范围联动
$('#datepicker1').datepicker('option', 'maxDate', selectedDate);
}
});
});代码详解：
通过本教程，您应该已经掌握了如何利用 jQuery UI Datepicker 构建一个功能完善的月份和年份选择器。核心在于正确配置 changeMonth、changeYear 和 dateFormat 选项，并巧妙地运用 onClose 回调函数来捕获用户的选择并更新输入框的值。同时，通过简单的 CSS 规则隐藏日历天数，可以极大地提升用户体验。结合日期范围联动功能，您可以为用户提供一个强大而直观的日期选择界面。
以上就是使用 jQuery UI Datepicker 构建月份和年份选择器教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
收藏
