在HTML中用JS函数格式化日期及Handlebars调用报错问题

嘿，我之前也踩过这个坑！Handlebars模板引擎没办法直接调用全局的JavaScript函数，因为它运行在自己的上下文环境里。要让你的formatDate函数能在模板里正常工作，得先把它注册成Handlebars的**助手（Helper）**才行。下面是具体的解决步骤和常见问题排查：

1. 注册Handlebars助手 #

在你的script.js文件里，写完formatDate函数后，添加一行注册代码，把函数绑定到Handlebars的助手系统中：

function formatDate(date) {
  let d = new Date(date);
  // 新增：检查传入的日期是否有效，避免Invalid Date导致的报错
  if (isNaN(d.getTime())) {
    return 'Invalid Date';
  }
  let month = '' + (d.getMonth() + 1);
  let day = '' + d.getDate();
  let year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return [month, day, year].join('/');
}

// 关键：注册为Handlebars助手
Handlebars.registerHelper('formatDate', formatDate);

2. 在Handlebars模板中正确调用 #

注册完成后，你就可以在Handlebars模板里直接用{{formatDate 你的日期字段}}的方式调用了，比如：

<!-- 假设你的数据里有一个名为mysqlDate的日期字段 -->
<div>格式化后的日期：{{formatDate mysqlDate}}</div>

3. 排查常见报错原因 #

如果还是报错，检查以下几个点：

• 助手注册时机是否正确：确保script.js是在Handlebars库加载之后、模板渲染之前执行的。如果你的模板是内联在HTML里的，要把script.js放在模板代码的前面，或者在DOM加载完成后再注册助手（比如用DOMContentLoaded事件包裹注册代码）。
• 日期参数是否有效：MySQL返回的日期通常是YYYY-MM-DD格式，new Date()可以正常解析，但如果是其他格式（比如带时区的字符串或者自定义格式），可能会生成Invalid Date。可以在函数里加个有效性判断，像上面代码里那样。
• Handlebars库是否正确引入：检查你的HTML页面里有没有加载Handlebars的脚本文件，比如：

  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
  

完整示例 #

这里给你一个可运行的完整示例，方便你参考：

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <title>Handlebars Date Format</title>
  <!-- 先加载Handlebars库 -->
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
</head>
<body>
  <!-- Handlebars模板 -->
  <script id="date-template" type="text/x-handlebars-template">
    <h3>原始日期：{{mysqlDate}}</h3>
    <h3>格式化后：{{formatDate mysqlDate}}</h3>
  </script>

  <!-- 加载你的script.js -->
  <script src="script.js"></script>
  <!-- 渲染模板的代码 -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 编译模板
      const template = Handlebars.compile(document.getElementById('date-template').innerHTML);
      // 模拟从MySQL获取的数据
      const data = { mysqlDate: '2024-05-20' };
      // 渲染到页面
      document.body.innerHTML += template(data);
    });
  </script>
</body>
</html>

script.js部分 #

就是前面写的带注册助手的代码，这样运行起来就能正常展示05/20/2024格式的日期啦！

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