如何在JavaScript中创建Apex.js时间线图所需的合法起止日期数组

错误原因 #

Uncaught (in promise)
Error: Please provide [Start, End] values in valid format

ApexCharts 时间线/范围图表的起止日期不支持DD-MM-YYYY格式的字符串输入，仅支持两类合法输入格式：

• 毫秒级时间戳数值
• 符合ISO规范的YYYY-MM-DD格式字符串

修复代码 #

新增日期格式转换逻辑，将现有日期字符串转为合法格式后再存入数组即可，修改后代码如下：

let dateArr = [];

let startDate = ["01-12-2021", "10-10-2021", "01-12-2021", "20-09-2021", "20-09-2021", "27-09-2021"];
let endDate = ["31-12-2021", "30-11-2021", "31-12-2021", "31-12-2021", "24-09-2021", "15-10-2021"]
let categories = ["Community Release / Review", "Development", "Documentation", "Gathering Visualizations", "Overview", "Training"]

// 日期转换：把DD-MM-YYYY格式字符串转成Apex支持的毫秒时间戳
function formatDate(dateStr) {
  const [day, month, year] = dateStr.split('-');
  // JS中Date对象月份从0开始计数，需要减1
  return new Date(year, Number(month) - 1, day).getTime();
}

for (let i = 0; i < categories.length; i++) {
  dateArr.push([formatDate(startDate[i]), formatDate(endDate[i])]);
}

console.log(dateArr)

可选方案 #

如果偏好使用字符串格式日期，可以修改转换函数的返回值为${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')}，输出YYYY-MM-DD格式的字符串，同样可以被ApexCharts正常识别。

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