AJAX获取数据后日期无法显示在type="date"输入框的问题求助

我通过以下AJAX代码从数据库获取数据，所有数据都能成功返回，但日期始终无法显示在type="date"类型的输入框中，相关代码如下：

function EditHoliday(id) {
    debugger;
    var url = "/RoketChat/editHoliday?Id=" + id;
    $("#editHolidays").modal();
    $.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            var obj = JSON.parse(data);
            $("#id").val(obj.Id);
            $("#HolidayName").val(obj.Name); 
            $("#StartDate").val(obj.StartDate);
            $("#EndDate").val(obj.EndDate);
        }
    })
}

解决办法 #

type="date"的输入框要求值必须是ISO 8601格式（即YYYY-MM-DD），后端返回的obj.StartDate和obj.EndDate大概率不符合这个格式（比如带时分秒、或是DD/MM/YYYY这类格式），导致输入框无法识别并展示。

你可以通过以下两种方式解决：

方式一：后端直接返回标准格式 #

在后端接口返回数据时，将日期直接格式化为YYYY-MM-DD的字符串，前端无需额外处理，直接赋值即可。

方式二：前端转换日期格式 #

修改AJAX成功回调中的日期赋值逻辑，将返回的日期转换为ISO格式：

success: function (data) {
    var obj = JSON.parse(data);
    $("#id").val(obj.Id);
    $("#HolidayName").val(obj.Name); 

    // 处理StartDate
    const startDate = new Date(obj.StartDate);
    const formattedStart = startDate.toISOString().split('T')[0];
    $("#StartDate").val(formattedStart);

    // 处理EndDate
    const endDate = new Date(obj.EndDate);
    const formattedEnd = endDate.toISOString().split('T')[0];
    $("#EndDate").val(formattedEnd);
}

如果后端返回的日期字符串格式不标准（比如DD-MM-YYYY），导致new Date()解析失败，可以手动拆分拼接：

// 假设obj.StartDate是"25-12-2024"格式
const [day, month, year] = obj.StartDate.split('-');
const formattedStart = `${year}-${month}-${day}`;
$("#StartDate").val(formattedStart);

内容的提问来源于stack exchange，提问作者Muhammad Azib Ali