Google Timeline Chart日期格式报错求助：无效日期匹配失败

嘿，我看到你在折腾Google Timeline图表的时候碰到了日期格式的坑，报错「Value Invalid Date does not match type date in column index 2」——这问题我之前也帮人排查过好几次，核心原因就是你给数据表格第2列（应该是开始日期列）传的不是有效的JavaScript Date对象，而是字符串或者其他不被识别的格式。

我给你梳理几个关键的修复步骤：

1. 确认数据表格的列类型定义 #

首先要确保你在创建DataTable时，第2列的类型明确设置为'date'，比如如果你的列顺序是「项目组、任务名称、开始日期、结束日期」，那列定义应该是这样：

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '项目组');   // 列索引0
dataTable.addColumn('string', '任务名称'); // 列索引1
dataTable.addColumn('date', '开始日期');   // 列索引2（就是报错的列）
dataTable.addColumn('date', '结束日期');   // 列索引3

如果这里把'date'写成了'string'或者其他类型，肯定会触发格式不匹配的报错。

2. 必须传入Date对象，不能用字符串 #

这是最容易踩的坑！你不能直接把'2024-01-01'这种日期字符串丢进去，必须转换成JavaScript Date实例。两种靠谱的写法：

• 用ISO格式字符串创建Date对象：

  // 正确示例
  dataTable.addRow(['前端组', '开发登录页', new Date('2024-01-01'), new Date('2024-01-15')]);
  

• 用年、月、日参数创建（注意：月份是从0开始的！1月对应0，12月对应11）：

  // 正确示例：2024年1月1日 → 月份传0
  dataTable.addRow(['后端组', '搭建API', new Date(2024, 0, 1), new Date(2024, 0, 20)]);
  

3. 避坑提醒 #

• 别用new Date('01/01/2024')这种美式日期格式，不同环境下解析结果可能不一致，优先用ISO格式'YYYY-MM-DD'。
• 如果你的日期数据是从后端接口获取的字符串，一定要先转换为Date对象再传入DataTable，比如：

  // 假设后端返回的startDate是字符串'2024-01-01'
  const startDate = new Date(backendData.startDate);
  const endDate = new Date(backendData.endDate);
  dataTable.addRow([backendData.group, backendData.task, startDate, endDate]);
  

• 可以检查你代码里console.log(obj)的输出，看看传入的日期值是不是有空值、格式错误的字符串，这些都会导致「Invalid Date」。

完整可运行示例代码 #

给你贴一个完整的正确示例，你可以对照着调整自己的代码：

google.charts.load("current", { packages: ["timeline"] });
google.charts.setOnLoadCallback(initTimeLineChart);

function initTimeLineChart() {
  var container = document.getElementById('timeline1');
  var chart = new google.visualization.Timeline(container);
  
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '项目组');
  dataTable.addColumn('string', '任务名称');
  dataTable.addColumn('date', '开始日期');
  dataTable.addColumn('date', '结束日期');
  
  // 用Date对象添加数据行
  dataTable.addRows([
    ['前端组', '开发登录页', new Date(2024, 0, 1), new Date(2024, 0, 15)],
    ['后端组', '搭建API接口', new Date(2024, 0, 5), new Date(2024, 0, 20)],
    ['测试组', '系统测试', new Date(2024, 0, 16), new Date(2024, 0, 25)]
  ]);
  
  var options = {
    timeline: { showRowLabels: true },
    height: 300
  };
  
  chart.draw(dataTable, options);
}

按照上面的步骤调整后，应该就能解决日期格式不匹配的报错了！

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