FullCalendar 5.9.0版本eventDrop事件中如何修改datetime日期格式

解决方案 #

问题原因 #

你当前代码直接对arg.event.start/arg.event.end这两个原生Date对象做字符串拼接时，会触发Date的默认toString()方法，输出带时区、星期、英文月份的长格式，就是你现在拿到的不符合要求的参数值。

实现步骤 #

1. 先写一个通用的日期格式化工具函数，复用start和end的格式化逻辑
2. 处理end为空的边界场景，直接复用start的格式化结果
3. 将格式化后的字符串传入ajax请求的参数中

完整代码 #

首先定义格式化函数：

// 自定义日期格式化函数，默认输出 YYYY-MM-DD HH:mm:ss 格式
function formatDate(date) {
  const year = date.getFullYear();
  // 月份从0开始计数，需要加1，不足2位补前缀0
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  // 如果你确实需要示例里end的202110-04格式，修改返回值为：`${year}${month}-${day} ${hour}:${minute}:${second}`
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}

修改你的eventDrop事件代码：

eventDrop: function(arg) {
  const start = formatDate(arg.event.start);
  // 结束时间为空时直接用开始时间的值
  const end = arg.event.end ? formatDate(arg.event.end) : start;

  $.ajax({
    url: 'process/edit.php',
    type: "POST",
    data: {id: arg.event.id, start: start, end: end},
  });
}

兼容提示 #

如果需要兼容不支持ES6 padStart方法的低版本浏览器，可以把补0逻辑换成手动判断：

// 示例：月份补0
const monthRaw = date.getMonth() + 1;
const month = monthRaw < 10 ? '0' + monthRaw : monthRaw;

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