如何为多个带唯一ID的Div元素配置Pikaday日历

你的代码存在三个核心问题，导致遍历配置Pikaday时失效：

1. 语法错误：原代码中onSelect的箭头函数未闭合，new Pikaday的配置对象也缺少闭合括号，直接导致代码无法执行。
2. 元素选择错误：不存在document.getElementsByClass这个方法，正确写法是document.getElementsByClassName，但即便使用这个方法，它返回的是所有匹配类名的元素集合，无法精准给当前选中的div赋值。
3. 上下文指向错误：onSelect中使用箭头函数会改变this的指向，无法获取当前对应的div元素；同时你试图给所有.main_records元素赋值，而非当前触发选择的那个。

修复后的代码 #

$('.main_records').each(function() {
  // 保存当前遍历到的div元素引用
  const currentDiv = this;
  var picker = new Pikaday({
    field: currentDiv,
    numberOfMonths: 2,
    mainCalendar: 'right',
    onSelect: function(date) {
      // 使用moment格式化日期
      var formatDate = moment(date).format('MM/DD/YYYY');
      console.log(formatDate);
      // 给当前div赋值格式化后的日期
      currentDiv.innerHTML = formatDate;
    }
  });
});

关键修正点 #

• 补全了所有缺失的括号，修复语法错误。
• 在each循环内保存当前div的引用currentDiv，确保onSelect中能精准操作当前元素。
• 将onSelect的箭头函数改为普通函数（若坚持用箭头函数，可直接依赖提前保存的currentDiv），避免上下文指向混乱。
• 直接使用currentDiv.innerHTML赋值，替代错误的批量选择逻辑。

内容的提问来源于stack exchange，提问作者RalphF