chronos-etu使用文档查询及原生JS集成引入报错问题咨询

基础用法说明 #

chronos-etu的完整使用说明包含在npm包的README文件内，创建时间滑块实例的必填参数如下：

• 挂载容器：页面中预先存在的DOM节点，用于承载组件渲染内容
• 时间区间：定义滑块可选范围的起止时间，支持时间戳、Date对象两种格式
• 初始选中值：滑块加载完成后默认选中的时间/时间区间，格式需和时间区间参数保持一致

报错原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'Container')报错，核心原因是你引入的5.0.0版本为ESM格式资源，无法通过script标签直接引入后调用全局变量，导致组件内部依赖的容器实例无法正确初始化。

修复方案 #

方案1：使用UMD格式资源（推荐原生JS项目使用） #

1. 替换原有script引入代码：

<script src="https://cdn.jsdelivr.net/npm/chronos-etu@5.0.0/dist/chronos-etu.umd.min.js"></script>

2. 确保DOM加载完成后再初始化组件：

document.addEventListener('DOMContentLoaded', () => {
  const slider = new ChronosEtu.TimeSlider({
    container: document.querySelector('#你的容器ID'),
    range: {
      start: new Date(2024, 0, 1),
      end: new Date(2024, 11, 31)
    },
    value: new Date(2024, 3, 1)
  })
})

方案2：保持ESM引入方式 #

如果需要使用ES Module格式引入，需通过import语句显式导入组件：

import { TimeSlider } from 'https://cdn.jsdelivr.net/npm/chronos-etu@5.0.0/chronos-etu.min.js'

document.addEventListener('DOMContentLoaded', () => {
  // 初始化逻辑同上
})

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