Bulma Calendar扩展无法正常运行 替换资源精简页面仍无法定位故障

核心故障由两个常见的低级错误导致：

1. 初始化代码中直接使用了未定义的options变量，触发JS运行时错误，直接中断日历初始化流程
2. 若初始化脚本执行时机早于DOM渲染完成，会找不到目标[type="date"]元素，导致挂载失败

• 提前声明options配置对象，无自定义需求可直接定义为空对象
• 将初始化逻辑包裹在DOM加载完成的回调中，确保执行时页面元素已就绪

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.14/dist/css/bulma-calendar.min.css">

<div class="field">
  <input class="" type="date">
</div>

<script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.14/dist/js/bulma-calendar.min.js"></script>
<script>
// 等待DOM加载完成后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
  // 先定义配置对象，可根据需求添加自定义配置
  const options = {};

  // Initialize all input of date type.
  const calendars = bulmaCalendar.attach('[type="date"]', options);

  // Loop on each calendar initialized
  calendars.forEach(calendar => {
    // Add listener to select event
    calendar.on('select', date => {
      console.log(date);
    });
  });

  // 对应id为my-element的元素如果存在才执行后续逻辑
  const element = document.querySelector('#my-element');
  if (element) {
    element.bulmaCalendar.on('select', datepicker => {
      console.log(datepicker.data.value());
    });
  }
})
</script>

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