FullCalendar 3.1更新/删除弹窗中如何显示已保存的日期数据

核心原因 #

HTML5 datetime-local 类型的输入框仅支持 YYYY-MM-DDTHH:mm 格式的字符串赋值，你当前直接传入Date对象或其他格式的日期字符串，浏览器无法识别，所以不会显示内容。

具体修改步骤 #

1. 修正日期格式转换逻辑
   你之前注释的moment用法格式错误，datetime-local要求时间部分前加大写字母T，且小时使用24小时制的HH，不要用12小时制的hh。
2. 修正event.end为空时的赋值方法
   输入框赋值需要用val()方法，你当前用的text()对input元素无效。

修改后的updateEvent核心代码 #

function updateEvent(event, element) {
    if ($(this).data("qtip")) $(this).qtip("destroy");

    currentUpdateEvent = event;

    $('#updatedialog').dialog('open');
    $("#eventName").val(event.title);
    $("#eventDesc").val(event.description);
    $("#eventId").val(event.id);
    // 改动：转换为datetime-local支持的格式
    $("#eventStart").val(moment(event.start).format("YYYY-MM-DDTHH:mm"));
    
    $("#colorPicker").val(event.color);
    $("#EditEventNote").val(event.note);
    
    if (event.end === null) {
        // 改动：input用val赋值，不用text
        $("#eventEnd").val("");
    }
    else {
        // 改动：转换为datetime-local支持的格式
        $("#eventEnd").val(moment(event.end).format("YYYY-MM-DDTHH:mm"));
    }

    return false;
}

无moment依赖的原生JS方案 #

如果不想引入moment库，可以自己写个格式转换函数：

// 转换日期为datetime-local支持的格式
function formatDatetimeLocal(date) {
    const targetDate = new Date(date);
    const fillZero = (num) => num < 10 ? '0' + num : num;
    return `${targetDate.getFullYear()}-${fillZero(targetDate.getMonth()+1)}-${fillZero(targetDate.getDate())}T${fillZero(targetDate.getHours())}:${fillZero(targetDate.getMinutes())}`;
}

赋值时替换为以下写法即可：

$("#eventStart").val(formatDatetimeLocal(event.start));
$("#eventEnd").val(formatDatetimeLocal(event.end));

时区问题排查 #

如果赋值后显示的时间比实际时间差8小时，说明你拿到的event.start是UTC时间，把转换方法里的getFullYear、getMonth等方法替换为对应的UTC方法（getUTCFullYear、getUTCMonth）即可。

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