为多个同名类的 div 元素分别初始化 Pikaday 日期选择器，可以通过遍历这些元素并为每个元素单独实例化一个 Pikaday 实例来实现。以下是一个使用 JavaScript（原生）和 jQuery 的示例：✅ 使用原生 JavaScript

2026-05-25 23:23:56 0浏览 收藏

本文深入解析了如何为多个同名类（如 `.datepicker` 或 `.main_records`）的 DOM 元素分别、独立地初始化 Pikaday 日期选择器，重点破解了开发中常见的作用域混淆、this 指向错误、DOM 方法误用等陷阱；通过原生 JavaScript 和 jQuery 的双重示例，结合闭包缓存、正确字段绑定、安全内容更新及资源管理等最佳实践，手把手教你实现“一个元素、一个日历”的精准控制，让多日期录入场景既健壮又可维护。

本文详解如何使用 jQuery 遍历多个具有相同 class（如 .main_records）的 DOM 元素，并为每个元素独立绑定 Pikaday 日历实例，避免作用域混淆与 DOM 操作错误。

本文详解如何使用 jQuery 遍历多个具有相同 class（如 `.main_records`）的 DOM 元素，并为每个元素独立绑定 Pikaday 日历实例，避免作用域混淆与 DOM 操作错误。

在实际开发中，我们常需为一组结构相似的输入区域（例如多个日期录入项）分别启用日期选择功能。Pikaday 是一款轻量、无依赖的 JavaScript 日历组件，但其 field 选项要求传入单个原生 DOM 元素，且回调函数中的 this 上下文默认不指向当前绑定元素——若未正确维护作用域，极易导致日期值写入错误目标或报错。

你原始代码中的关键问题有三处：

1. ❌ document.getElementsByClass('.main_records') 是无效语法（不存在该方法），应为 document.getElementsByClassName()，但它返回的是 NodeList，无法直接调用 .innerHTML = ...；
2. ❌ 在 onSelect 箭头函数中使用 this 会丢失对当前 .main_records 元素的引用（箭头函数不绑定 this）；
3. ❌ 即使改用普通函数，this 在 onSelect 中也指向 Pikaday 实例本身，而非触发它的 DOM 元素。

✅ 正确做法是：在 .each() 循环中缓存当前 jQuery 对象，并在 onSelect 回调中通过闭包访问它。以下是优化后的完整实现：

$('.main_records').each(function() {
  const $currentDiv = $(this); // ✅ 缓存当前 jQuery 元素引用
  const picker = new Pikaday({
    field: this, // ✅ 必须传入原生 DOM 元素（this）
    numberOfMonths: 2,
    mainCalendar: 'right',
    onSelect: function(date) { // ✅ 使用普通函数以确保闭包可访问 $currentDiv
      const formatDate = moment(date).format('MM/DD/YYYY');
      console.log('Selected date:', formatDate);
      $currentDiv.text(formatDate); // ✅ 安全更新当前 div 的文本内容（推荐用 .text() 而非 .html()，防 XSS）
      // 若需保留 HTML 结构，可用 $currentDiv.html(formatDate)，但请确保内容可信
    }
  });
});

? 注意事项与最佳实践：

• 避免内联 HTML 注入：除非业务明确需要渲染富文本，否则优先使用 .text(formatDate) 替代 .html(...)，防止潜在的 XSS 风险；
• 确保依赖已加载：Pikaday 和 Moment.js（或替代方案如 date-fns）必须在执行前完成加载，建议通过