html日历api代码

HTML5 原生日期输入 <input type="date">

基本用法

<input type="date" id="myDate">

• 功能：打开系统原生日期选择器，支持年、月、日选择。
• 兼容性：Chrome/Firefox/Edge/Safari 支持，IE/旧版浏览器不支持。

属性说明

示例代码

<input type="date" id="birthday" min="1900-01-01" max="2025-12-31" placeholder="请选择生日">
<script>
  document.getElementById('birthday').value = '2023-10-01'; // 设置默认值
</script>

JavaScript 自定义日历组件

核心功能实现

1. HTML 结构：

   

   <div id="custom-calendar"></div>

2. JavaScript 逻辑：

   const calendar = document.getElementById('custom-calendar');
   const now = new Date();
   const year = now.getFullYear();
   const month = now.getMonth(); // 0-11
   const date = now.getDate();
   function renderCalendar() {
     let html = `<div class="calendar-header"><button>上一月</button> ${year}年${month+1}月 <button>下一月</button></div>`;
     html += `<div class="calendar-body"><table><thead><tr>`;
     // 星期标题
     ['日','一','二','三','四','五','六'].forEach(d => {
       html += `<th>${d}</th>`;
     });
     html += `</thead><tbody>`;
     // 生成日期
     const firstDay = new Date(year, month, 1).getDay(); // 本月第一天是周几
     let dayCount = new Date(year, month + 1, 0).getDate(); // 本月总天数
     let currentWeek = Array(firstDay).fill(null); // 补全前导空白
     for (let i = 1; i <= dayCount; i++) {
       currentWeek.push(i);
       if (currentWeek.length === 7) {
         html += `<tr>${currentWeek.map(d => d ? `<td>${d}</td>` : `<td></td>`).join('')}</tr>`;
         currentWeek = [];
       }
     }
     html += `</tbody></table></div>`;
     calendar.innerHTML = html;
   }
   renderCalendar();

样式示例（CSS）

.calendar-header { display: flex; justify-content: space-between; }
.calendar-body table { width: 100%; border-collapse: collapse; }
.calendar-body th, .calendar-body td { 
  width: 14.28%; text-align: center; padding: 5px; 
  border: 1px solid #ccc; 
}
.calendar-body td:empty { background: #f5f5f5; }

事件处理与交互扩展

示例：监听日期变化

const dateInput = document.getElementById('myDate');
dateInput.addEventListener('change', () => {
  alert(`您选择了：${dateInput.value}`);
});

常见问题与解决方案

如何限制用户只能选择未来日期？

<input type="date" id="future-date" min="<?php echo date('Y-m-d'); ?>">

• 原理：min 属性设置为当前日期,禁止选择过去日期。

如何格式化 <input type="date"> 的值？

const rawValue = document.getElementById('myDate').value; // "2023-10-05"
const formatted = rawValue.replace(/-/g, '/'); // 转换为 "2023/10/05"

• 注意：日期格式需根据后端接口或业务需求调整。

相关问题与解答

问题1：<input type="date"> 在移动端是否支持？

解答：大部分移动端浏览器支持（如iOS、Android），但部分国产浏览器可能依赖系统日期选择器，建议测试或使用第三方库（如Mobiscroll）增强兼容性。

问题2：如何让自定义日历支持年份选择？

解答：在自定义日历头部添加“年份切换”按钮,点击后弹出年份选择层。

const yearBtn = calendar.querySelector('.year-btn');
yearBtn.addEventListener('click', () => {
  // 弹出年份选择弹窗，选中后更新年份并