如何在FullCalendar的悬浮提示框中显示事件的起止时间？

我来帮你搞定这个问题！你遇到的情况是因为JavaScript中Date对象直接用+拼接时会被自动转换为时间戳数字，而不是你看到的那种友好的日期字符串。当你单独把event.start或event.end传给popover的content时，popover内部会自动把Date对象转为字符串（也就是调用Date.toString()），所以显示正常；但两个Date对象相加时，JS会先把它们都转成时间戳数值再计算，结果就变成了一串数字。

要实现你想要的Start: 9AM End: 3PM格式，我们需要先把Date对象格式化为指定的字符串样式，这里有两种常用方法：

方法一：自定义时间格式化函数 #

自己写一个简单的函数，把Date对象转换成12小时制带AM/PM的格式：

// 定义格式化函数
function formatTo12Hour(date) {
  let hours = date.getHours();
  const period = hours >= 12 ? 'PM' : 'AM';
  // 把24小时制转成12小时制，0点转为12
  hours = hours % 12 || 12;
  return `${hours}${period}`;
}

// 调用函数格式化时间
element.popover({
  content: `Start: ${formatTo12Hour(event.start)} End: ${formatTo12Hour(event.end)}`,
  animation: true,
  delay: 300,
  trigger: 'hover',
  placement: 'top',
  container: 'body'
});

方法二：用FullCalendar自带的moment.js（如果已引入） #

如果你的FullCalendar项目已经依赖了moment.js（很多FullCalendar版本默认会用它处理日期），可以直接用moment的格式化能力，代码更简洁：

element.popover({
  content: `Start: ${moment(event.start).format('hA')} End: ${moment(event.end).format('hA')}`,
  animation: true,
  delay: 300,
  trigger: 'hover',
  placement: 'top',
  container: 'body'
});

这里的hA是moment的格式化标记：h表示12小时制的小时数，A表示大写的AM/PM。

如果之后你需要显示更完整的日期（比如加上年月日），只需要调整格式化字符串即可，比如moment里用MMM D, YYYY hA就能得到May 9, 2018 9AM这样的格式。

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