使用 Javascript 将 AM/PM 从 Google 日历输出到 HTML 页面

Question

我正在使用 Google 日历来显示曲棍球联赛的比赛。作为其中的一部分，我还从这些 Google 日历活动中提取一些详细信息，并将其显示在该联盟中每个团队的单独团队页面 (HTML) 上。我过去能够将 PM“硬编码”到时间输出中，因为所有比赛都在下午进行。然而这个赛季会有一些早上的比赛，我将无法再这样做了。

目前，我只是以 24 小时格式输出时间。但理想情况下，我更愿意显示带有 AM 或 PM 后缀的 12 小时格式。

我已在下面附上我当前使用的代码。谁能提供一个解决方案来显示 AM 或 PM 作为此代码片段的一部分？

    <script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
    var myObj, i, x = "";
    myObj = JSON.parse(this.responseText, function (key, value){
    if (key == "dateTime") {

        function unix_to_readable(value) {
        var date = new Date(value) ;
        return ('0' + (date.getMonth()+1)).slice(-2) + '/'
             + ('0' + date.getDate()).slice(-2) + '/'
             + date.getFullYear() + '<br/>' 
            + date.getHours() % 12 
            + ':' + ('0' + date.getMinutes()).slice(-2) 
            + ' PM'; 
        }
        return unix_to_readable(value);
        } 
    
        else {
            return value;
        }
    }
    );

    for (i = 0; i < myObj.items.length; i++) 
    {
      x += "<tr class='TableHeader'><td colspan='2' align='center'>" + myObj.items[i].summary + "</td></tr><tr><td align='center'><b>" + myObj.items[i].start.dateTime + "</b></td><td align='center' style='font-size:12px'>" + myObj.items[i].location + "</td></tr><tr><td colspan='2'></td></tr>";
    }
    document.getElementById("demo").innerHTML = x;  }
    };

    xmlhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/9lh231pkuunmglga33vso1cnv8%40group.calendar.google.com/events?q=" + q + "&timeMin=2023-09-01T01:00:00-05:00&timeMax=2024-03-01T01:00:00-05:00&singleEvents=True&orderBy=startTime&key=AIzaSyBFDfMVc8WUWgXluMpYr4-OVkUn1EyIbuM", true);
    xmlhttp.send();
    </script>

Answer 1

在你的脚本中，进行以下修改怎么样？在此修改中，您的

unix_to_readable

已被修改。

来自：

function unix_to_readable(value) {
var date = new Date(value) ;
return ('0' + (date.getMonth()+1)).slice(-2) + '/'
     + ('0' + date.getDate()).slice(-2) + '/'
     + date.getFullYear() + '<br/>' 
    + date.getHours() % 12 
    + ':' + ('0' + date.getMinutes()).slice(-2) 
    + ' PM'; 
}

致：

function unix_to_readable(value) {
  var date = new Date(value);
  return ('0' + (date.getMonth() + 1)).slice(-2) + '/'
    + ('0' + date.getDate()).slice(-2) + '/'
    + date.getFullYear() + '<br/>'
    + date.toLocaleString("en-US", { minute: "2-digit", hour: "numeric", hour12: true });
}

• 请根据您的实际情况修改

  en-US

  。

• 如果您想在小时中添加

  0

  ，请将

  hour: "numeric"

  修改为

  hour: "2-digit"

  。

参考资料：

• toLocaleString()
• Intl.DateTimeFormat() 构造函数