js实现日期插件

实现基础日期选择功能

使用HTML的<input type="date">原生日期选择器，兼容现代浏览器：

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

通过JavaScript获取值：

document.getElementById('datePicker').addEventListener('change', function() {
  console.log(this.value); // 输出格式：YYYY-MM-DD
});

使用第三方库（Flatpickr）

安装Flatpickr库：

npm install flatpickr

或通过CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

初始化日期选择器：

flatpickr("#datePicker", {
  dateFormat: "Y-m-d",
  minDate: "today",
  allowInput: true
});

自定义日期选择组件

创建一个简单的交互式日历：

<div id="customCalendar">
  <div class="header">
    <button id="prevMonth">←</button>
    <h3 id="currentMonth"></h3>
    <button id="nextMonth">→</button>
  </div>
  <div class="days" id="daysContainer"></div>
</div>

JavaScript逻辑：

let currentDate = new Date();
function renderCalendar() {
  const monthNames = ["January", "February", "..."]; // 完整月份数组
  document.getElementById("currentMonth").textContent = 
    `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

  // 生成日历格子逻辑（需补充完整实现）
  const daysContainer = document.getElementById("daysContainer");
  daysContainer.innerHTML = '';
  // ... 计算当月天数及排列
}

document.getElementById("prevMonth").addEventListener("click", () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
});

移动端优化

添加触摸事件支持：

const calendar = document.getElementById("customCalendar");
let touchStartX = 0;
calendar.addEventListener("touchstart", (e) => {
  touchStartX = e.changedTouches[0].screenX;
});
calendar.addEventListener("touchend", (e) => {
  if (e.changedTouches[0].screenX - touchStartX > 50) {
    // 右滑视为上一月
    currentDate.setMonth(currentDate.getMonth() - 1);
  } else if (touchStartX - e.changedTouches[0].screenX > 50) {
    // 左滑视为下一月
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
  renderCalendar();
});

日期范围限制

在自定义组件中实现禁止选择过去日期：

function isDateSelectable(date) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return date >= today;
}

// 在渲染每个日期格子时调用检查

时区处理

使用toLocaleDateString适配本地化显示：

const options = { timeZone: 'Asia/Shanghai', weekday: 'long' };
console.log(new Date().toLocaleDateString('zh-CN', options));