登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > 自定义月份年份选择器实现方法

自定义月份年份选择器实现方法

2026-01-19 11:01:03 0浏览 收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何自定义月份年份选择器实现方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

如何创建一个自定义的月份与年份选择器

本文介绍如何用原生 JavaScript 构建轻量、可定制的月年选择器，重点解决初始化时年份显示错误（如默认显示 2024 而非当前年 2023）及当前年被误禁用的问题，并提供完整可运行代码与关键逻辑解析。

在开发表单或日期筛选功能时，标准 无法满足仅选择“年+月”的需求，而引入大型 UI 库又显得过度。此时，一个简洁、可控的自定义月年选择器（Month-Year Picker）是理想方案。本文将带你从零实现一个纯原生、无依赖的解决方案，并精准修复两个常见初始化缺陷：

  • ✅ 页面加载时，默认应显示「当前年 + 当前月」（如 2023 年 7 月），而非错误地显示 2024 年；
  • ✅ 当用户选择当前月份（如 7 月）时，当前年（2023）必须始终可用，不可被意外禁用。

? 核心问题根源：执行顺序导致状态错位

原始代码中，updateYearOptions() 在 updateMonthOptions() 之前调用：

updateYearOptions(); // ❌ 此时 month  初始值为 1（January），而当前月份是 7（July），条件 selectedMonth < currentMonth 成立 → 错误禁用 2023 年选项，且 selectedYear 初始化为 2023，但该选项已被禁用，触发回退逻辑 yearToSelect = year + 1，最终选中 2024。
解法极其简洁：调整初始化顺序，确保月份先设为正确值，再生成年份选项。
✅ 修复后的完整实现



  


  

    
    

    
    
    
  


  


⚠️ 注意事项与增强建议
  • 语义化与可访问性：为 
                                
    
                  
                
    
                
    
                  
                
    
                
    
                  
    
                    
                  
    
                
                    
                
              
    
                
    
                  忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码