本教程详细介绍了如何使用 jquery ui datepicker 实现一个仅允许选择月份和年份的日期选择器。我们将通过配置核心选项、利用 `onclose` 回调函数处理选定的月份和年份，并结合 css 隐藏日历视图，来达到这一目标。教程还包括了如何引入必要的库文件以及实现日期范围联动的逻辑，确保功能完整且用户体验良好。
在许多业务场景中，我们可能只需要用户选择一个特定的月份和年份，而非精确到某一天。jQuery UI Datepicker 提供了一套灵活的配置选项和回调机制，可以帮助我们轻松实现这一功能。本教程将引导您完成从环境准备到核心逻辑实现的所有步骤。
1. 准备工作：引入必要的库文件
要使用 jQuery UI Datepicker，您需要引入以下三个核心文件：
jQuery 库： jQuery UI 依赖于 jQuery。jQuery UI JavaScript 文件： 包含 Datepicker 组件的逻辑。jQuery UI CSS 文件： 提供 Datepicker 的样式。
为了避免使用 CDN，您可以右键点击以下链接并选择“另存为”将文件下载到本地项目目录中：
jQuery 3.6.0jQuery UI 1.13.2 JavaScriptjQuery UI 1.13.2 CSS
下载完成后，请将它们链接到您的 HTML 文件中，通常放在 head 或 body 标签的末尾：
月份和年份选择器 // Datepicker 初始化代码将放在这里
请将 path/to/ 替换为实际的文件路径。
2. HTML 结构
我们需要两个输入框来承载“开始日期”和“结束日期”的选择，它们将作为 Datepicker 的触发元素。
开始日期 :
结束日期 :
这两个 input 元素通过 id 属性 (datepicker1 和 datepicker2) 被 JavaScript 代码引用，以便初始化 Datepicker。
3. CSS 样式调整
为了实现只选择月份和年份，我们需要隐藏 jQuery UI Datepicker 默认显示的日历天数部分。可以通过添加以下 CSS 规则来完成：
.ui-datepicker-calendar { display: none;}
将此 CSS 代码添加到您的样式表文件（或 标签内），确保它在 jQuery UI 的默认样式之后加载，以便覆盖其默认行为。
4. JavaScript 核心逻辑
现在是实现 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); } });});
代码详解：
$(function() { … });: 这是 jQuery 的简写，确保在 DOM 加载完成后执行代码，避免元素未加载导致错误。changeMonth: true 和 changeYear: true: 这两个选项会在 Datepicker 头部添加月份和年份的下拉选择框，允许用户直接选择。showButtonPanel: true: 这个选项会显示一个底部面板，其中包含“今天”和“完成”按钮。在只选择月份和年份的场景中，“完成”按钮（或其等效功能）尤其有用，它允许用户在选择完月份和年份后显式确认。dateFormat: ‘mm-yy’: 设置输入框中日期的显示格式为“月份-年份”，例如“01-2023”。onClose: function(dateText, inst) { … }: 这是实现月份和年份选择的核心。当用户选择完月份和年份并关闭 Datepicker 时，此回调函数会被触发。我们通过 jQuery 选择器 $(“#ui-datepicker-div .ui-datepicker-month :selected”).val() 和 $(“#ui-datepicker-div .ui-datepicker-year :selected”).val() 获取用户在下拉框中选择的月份和年份。new Date(year, month, 1) 创建一个新的 Date 对象。注意，月份在 JavaScript 的 Date 对象中是基于 0 的（0 代表一月，11 代表十二月），但 val() 获取到的月份是 1-12，所以这里直接使用 month 变量是正确的，因为 val() 已经返回了 0-11 的值（HTML option 元素的 value 属性通常是 0-11）。如果 val() 返回的是 1-12，则需要 month – 1。在 jQuery UI 的内部实现中，$(“#ui-datepicker-div .ui-datepicker-month :selected”).val() 已经返回了 0-11 的月份索引。$(this).datepicker(‘setDate’, selectedDate) 将当前 Datepicker 的值设置为我们构造的 selectedDate 对象。这会更新输入框的内容。日期范围联动：对于 datepicker1 (开始日期)，当其值被设置后，我们通过 $(‘#datepicker2’).datepicker(‘option’, ‘minDate’, selectedDate); 将 datepicker2 (结束日期) 的最小可选日期设置为 datepicker1 的当前选中日期。对于 datepicker2 (结束日期)，当其值被设置后，我们通过 $(‘#datepicker1’).datepicker(‘option’, ‘maxDate’, selectedDate); 将 datepicker1 (开始日期) 的最大可选日期设置为 datepicker2 的当前选中日期。这种方式确保了“开始日期”不会晚于“结束日期”，“结束日期”不会早于“开始日期”，维护了日期选择的逻辑一致性。
5. 注意事项
jQuery UI Datepicker 与 Bootstrap Datepicker 的区别：原问题中提到的 minViewMode: 1 和 format: ‘mm-yyyy’ 是 bootstrap-datepicker 的选项。本教程使用的是 jQuery UI Datepicker，其实现月份和年份选择的方式有所不同，主要通过 changeMonth、changeYear 选项结合 onClose 回调函数来完成。请勿混淆两者。onClose 回调的重要性：在只选择月份和年份的场景下，onClose 是核心。它允许我们在用户完成选择（关闭 Datepicker 弹窗）时，获取到用户通过下拉框选择的月份和年份，并手动设置输入框的值。如果没有这个回调，即使启用了 changeMonth 和 changeYear，Datepicker 仍然会期望用户选择一个具体的日期。版本兼容性：本教程基于 jQuery 3.6.0 和 jQuery UI 1.13.2。不同版本之间可能存在细微的 API 差异，如果遇到问题，请检查您使用的库版本。用户体验：showButtonPanel: true 可以提供一个“完成”按钮，对于用户确认选择很有帮助。如果不需要，可以移除。通过 CSS 隐藏日历天数是关键，它使得界面更清晰，避免用户困惑。
总结
通过本教程，您应该已经掌握了如何利用 jQuery UI Datepicker 构建一个功能完善的月份和年份选择器。核心在于正确配置 changeMonth、changeYear 和 dateFormat 选项，并巧妙地运用 onClose 回调函数来捕获用户的选择并更新输入框的值。同时，通过简单的 CSS 规则隐藏日历天数，可以极大地提升用户体验。结合日期范围联动功能，您可以为用户提供一个强大而直观的日期选择界面。
以上就是使用 jQuery UI Datepicker 构建月份和年份选择器教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592805.html
微信扫一扫 
支付宝扫一扫 
