Google Charts Table添加日期筛选器解决列非日期类型错误问题

PHP执行json_encode时会自动将日期类型字段序列化为字符串，传到JS端后第6列数据为字符串格式，不符合Google Charts DateRangeFilter要求的Date对象类型，因此触发类型报错。

只需要在JS端渲染图表前，将第6列的日期字符串转换为JS Date对象即可，修改你的drawDashboard函数代码：

function drawDashboard(tableData) {
  // 新增：处理日期列，将字符串转为Date对象
  tableData.forEach((row, index) => {
    // 若你的tableData第一行是表头，保留index>0的判断；如果是纯数据则删掉该判断
    if (index > 0) {
      row[6] = new Date(row[6]);
    }
  });

  var data = new google.visualization.arrayToDataTable(tableData);

  var dashboard = new google.visualization.Dashboard(
  document.getElementById('dashboard_div'));

  var stringFilter = new google.visualization.ControlWrapper({
      controlType: 'StringFilter',
      containerId: 'string_filter_div',
      options: {
          filterColumnIndex: 6
      }
  });  
  // 放开之前注释的日期范围筛选配置
  var dateRange = new google.visualization.ControlWrapper({
      controlType: 'DateRangeFilter',
      containerId: 'daterange_div',
      options: {
          filterColumnIndex: 6
      }
  });  

  var table = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'table_div1',
      options: {
      showRowNumber: true,
      width: '90%',
      page: 'enable',
      pageSize: 15
      }
  });

  // 同时绑定两个筛选器到表格
  dashboard.bind([stringFilter, dateRange], table);
  dashboard.draw(data);
}

如果不想依赖Google Charts的自带控件，可以自己实现日期筛选逻辑，步骤如下：

1. 新增日期选择HTML代码，放到你的dashboard容器内：

<div style="margin: 10px 0;">
  开始日期：<input type="date" id="startDate">
  结束日期：<input type="date" id="endDate">
  <button id="doFilter">筛选日期</button>
</div>

2. 修改JS代码，存储原始全量数据，实现筛选逻辑：

// 存储全量原始数据，用于多次筛选
const originTableData = <?php echo json_encode($infoTable) ?>;

function drawDashboard(tableData) {
  var data = new google.visualization.arrayToDataTable(tableData);
  // 原有drawDashboard内的其余代码保持不变，注意注释掉之前的DateRangeFilter相关配置
  ...
}

// 页面加载完成后绑定筛选事件
google.charts.setOnLoadCallback(function() {
  drawDashboard(originTableData);
  // 绑定筛选按钮点击事件
  document.getElementById('doFilter').addEventListener('click', () => {
    const startVal = document.getElementById('startDate').value;
    const endVal = document.getElementById('endDate').value;
    if (!startVal || !endVal) return alert('请选择完整的日期范围');

    const start = new Date(startVal);
    const end = new Date(endVal);
    // 将结束日期的时分秒设为当天最晚时间，避免当天数据被过滤
    end.setHours(23, 59, 59);

    // 筛选数据，保留表头
    const filteredData = [originTableData[0]];
    for (let i = 1; i < originTableData.length; i++) {
      const rowDate = new Date(originTableData[i][6]);
      if (rowDate >= start && rowDate <= end) {
        filteredData.push(originTableData[i]);
      }
    }
    // 重新渲染表格
    drawDashboard(filteredData);
  });
});

• 如果你的$infoTable数组不包含表头，所有遍历逻辑中跳过首行的判断都可以删除
• 若存在日期转换失效的情况，可以在PHP组装数组时将日期格式统一输出为Y-m-d的标准格式，保证JS new Date()可以正常解析

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