如何在JavaScript中正确显示来自JSON记录的日期数据

我有一段可正常运行的代码，用alert显示日期时，会呈现这样的格式：Thu Dec 28 2023 00:00:00 GMT+0100 (West Africa Standard Time)，代码如下：

$(document).ready(async function(){

function rec(el, data, settings){

var obj = data;
console.log(obj);
}

var events = [
  {'Date': new Date(2023, 10, 28), 'Title': 'title 1'},
  {'Date': new Date(2023, 11, 28), 'Title': 'title 2'},
  {'Date': new Date(2022, 12, 27), 'Title': 'title 3'},
];
// alert date sample
alert(events[0].Date);

var settings = {};
var element = document.getElementById('caleandar');
rec(element, events, settings);

});

现在我通过fetch API调用PHP后端获取记录，运行后执行alert(events[0].Date);，得到的是**new Date(2023, 10, 28)**这样的字符串，不是期望的日期格式。我需要把所有日期都转换成期望的格式。

相关代码如下：

index.html #

$(document).ready(async function(){

function rec(el, data, settings){
var obj = data;
console.log(obj);
}

const response = await fetch('http://localhost/record.php', {
    method: 'GET'
});

var events = await response.json();
alert(events[0].Date);

var settings = {};
var element = document.getElementById('caleandar');
rec(element, events, settings);

});

record.php #

/*
$return_arr = array();

$query = "SELECT * FROM usera";

$result = mysqli_query($con,$query);

while($row = mysqli_fetch_array($result)){
    $Date = $row['Date'];
    $title = $row['title'];
    $link = $row['link'];

    $return_arr[] = array(
                    "Date" => $Date,
                    "Title" => $title,
                    "Link" => $link);
}

// Encoding array in JSON format
 json_encode($return_arr);
*/

    $arr = array(
        array(
            "Date" => "new Date(2023, 10, 28)",
            "Title" => "title 1"
        ),
        array(
            "Date" =>  "new Date(2023, 11, 28)",
            "Title" => "title 2"
        ),
        array(
               "Date" =>  "new Date(2023, 11, 28)",
            "Title" => "title 3"
        )
    );
    
    echo json_encode($arr);

方法一：修改后端PHP代码，传递可解析的日期格式 #

目前PHP返回的是"new Date(2023, 10, 28)"字符串，前端无法直接识别为Date对象。推荐后端传递时间戳或者ISO标准日期字符串，前端再转换为Date对象：

方案1：传递时间戳

修改PHP中Date字段的赋值，把日期转换为时间戳：

// 手动构造数据示例
$arr = array(
    array(
        "Date" => strtotime("2023-11-28"), // 注意：JavaScript月份从0开始，PHP从1开始，这里2023-11对应JS的10月
        "Title" => "title 1"
    ),
    // 其他项同理
);

// 从数据库读取日期时，直接转时间戳
// $Date = strtotime($row['Date']);

前端接收后转换为Date对象：

var events = await response.json();
// 遍历数组，将每个Date字段转为Date对象
events = events.map(item => {
    item.Date = new Date(item.Date * 1000); // PHP时间戳是秒级，JS是毫秒级，需乘1000
    return item;
});
alert(events[0].Date); // 此时会显示期望的日期格式

方案2：传递ISO日期字符串

PHP直接输出ISO格式的日期字符串：

// 手动构造数据示例
$arr = array(
    array(
        "Date" => "2023-11-28T00:00:00", // ISO格式，JS可直接解析
        "Title" => "title 1"
    ),
    // 其他项同理
);

// 数据库读取日期时，格式化为ISO格式
// $Date = date('c', strtotime($row['Date'])); // 'c'对应ISO 8601标准格式

前端直接转换：

var events = await response.json();
events = events.map(item => {
    item.Date = new Date(item.Date);
    return item;
});
alert(events[0].Date);

方法二：前端解析现有字符串格式 #

如果暂时无法修改后端，可以在前端解析"new Date(2023, 10, 28)"这种固定格式的字符串：

var events = await response.json();
events = events.map(item => {
    // 提取括号内的参数
    const dateParams = item.Date.match(/new Date\((.*?)\)/)[1];
    // 转为数字数组后传入Date构造函数
    item.Date = new Date(...dateParams.split(',').map(Number));
    return item;
});
alert(events[0].Date);

注意：这种方法依赖字符串格式完全固定，后端输出格式变化就会失效，优先推荐后端传递标准格式。

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