将iso8601时间字符串转换为JS中的当前时区

Question

我在一个应用程序中使用https://fullcalendar.io/日历插件。我为日历提供了日期为"2021-09-15T14:30:00+01:00"格式的iso8601数据，日历很好地显示了根据浏览器中设置的时区调整的时间。

例如，如果浏览器处于"+01:00“时区，则该时间显示为14:30，但如果处于"+02:00”时区，则显示为15:30，以此类推。

我的问题是，我想在日历之外的其他上下文中显示这些时间，我不想从服务器输出不同的东西-我希望转换发生在浏览器中，使用javascript。

我想到我可以这样做:使用data属性中的iso861字符串在跨度中输出时间，也许还可以使用一个类作为页面上一些通用js的触发器。但是，在JS中有没有一种简单的方法可以使用浏览器的时区设置将iso8601时间字符串转换为时间呢？我想我需要另一个数据属性，该属性包含一些关于如何格式化它的信息，比如本例中的"%H:%M" (如果我想输出"14:30“或"15:30")。

注意-我们使用jquery，我将在下面的示例JS中使用它。

如下所示：

<!-- in html - the span contains the default unconverted time -->

<span class="convertable-time" data-iso8601="2021-09-15T14:30:00+01:00" data-datetime-format="%H:%M">14:30</span>

然后在JS中类似这样(这是使用jquery，但解决方案不需要)

$(".convertable-time").each(function(i,el){
  el = $(el);
  el.html(convertIso8601StringToLocalTime(el.data("iso8601"), el.data("datetime-format"));
});

function convertIso8601StringToLocalTime(string, format){
  //eg string = "2021-09-15T14:30:00+01:00"
  //eg format = "%H:%M"
  // ??
}

我应该在convertIso8601StringToLocalTime函数中放入什么？注意-我并不执着于"%H:%M“的确切格式字符串，如果有更标准的方式在JS中指定日期时间格式，那么我很乐意使用它。谢谢。

Answer 1

这就是我最终要做的：

//expects timestring to be an iso8601 formatted datetime string eg "2021-09-15T14:30:00+01:00"
//accepted strings for "format": copied from ruby's DateTime#strftime method
// %M - minutes
// %H - hours
// %S - seconds
// %d - day of the month
// %Y - year four digits
// %y - year two digits
// %m - month (as a number)
function convertIso8601StringToLocalTime(timestring, format){
  //set default format
  if((typeof(format) == "undefined") || (format == "")){
    format = "%H:%M";
  }
  var date = new Date(timestring);
  var replacements = {
    "getMinutes": /\%M/g,
    "getHours": /\%H/g,
    "getDate": /\%d/g,
    "getFullYear": /\%Y/g,
    "getMonth": /\%m/g
  }
  for (const [function_name, regex] of Object.entries(replacements)) {
    if(format.match(regex)){
      format = format.replace(regex, date[function_name]());
    }
  }
  // year two digits doesn't have a method we can call on a Date as far as I can see
  // ('getYear()' returns '121' for me which is mysterious)
  // so we do it 'manually' here by modding the full year by 100
  if(format.match(/\%y/g)){
    format = format.replace(/\%y/g, (date.getFullYear() % 100));
  }
  return format;
}