纯原生JavaScript实现日期选择器：监听输入框点击动态生成含上下月补位的日历HTML，精确定位面板，点击日期回填并隐藏，支持上下月切换、选中高亮及范围限制。
用 JavaScript 实现一个点击输入框后弹出日历面板的日期选择器，核心是：监听点击、动态生成日历 HTML、定位面板、处理日期点击并回填。不需要依赖库，纯原生即可完成。
1. 基础结构：输入框 + 隐藏日历容器
先在页面中放一个可点击的输入框，并预留一个用于插入日历面板的 div（初始隐藏）：
<input type="text" id="dateInput" placeholder="请选择日期" readonly> <div id="calendarPanel" class="calendar-panel" style="display:none;"></div>
注意：readonly 防止软键盘弹出（移动端友好），display:none 初始隐藏面板。
2. 用 JS 动态渲染当月日历
写一个函数，根据指定年月生成包含完整星期的日历表格（含上月/下月补位日期）：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
new Date(year, month, 1)获取当月第一天是星期几（getDay()） - 计算上月显示天数（补在开头）、当月总天数（
new Date(year, month + 1, 0).getDate()）、下月补位天数 - 拼接
<table>字符串，每行 7 天，给当天加class="today"，选中日期加class="selected" - 把生成的 HTML 插入
#calendarPanel，再设为display: block
3. 绑定交互事件
关键三步绑定：
- 点击输入框：调用渲染函数，显示面板；同时检查是否已存在面板，避免重复渲染
-
点击日历中的日期单元格：获取该日期（需结合年、月及单元格文本），格式化为
YYYY-MM-DD，填入输入框，并隐藏面板 -
点击页面其他地方：监听
document.onclick，判断点击目标是否在输入框或面板内，否则隐藏面板
示例节选（简化）：
document.getElementById('dateInput').addEventListener('click', showCalendar);
document.addEventListener('click', e => {
const input = document.getElementById('dateInput');
const panel = document.getElementById('calendarPanel');
if (!input.contains(e.target) && !panel.contains(e.target)) {
panel.style.display = 'none';
}
});
4. 补充体验细节
让选择器更实用：
- 支持「上月 / 下月」按钮：更新年月变量，重新调用渲染函数
- 高亮当前选中日期：渲染时比对输入框值（如有），给对应
<td>加selected类 - 限制可选范围（如只允许今天及之后）：渲染时跳过禁用日期，或点击时校验
- 面板定位：用
getBoundingClientRect()获取输入框位置，让面板紧贴下方显示
样式建议用简单 CSS 控制边框、居中、悬停变色，无需复杂框架。
