如何获取用户时区的完整时间和日期

Question

我正在尝试使用普通 Javascript 显示日期和时间。我想显示完整的日期和时间以及用户的时区。

这是我想要的输出：

Wednesday, January 30th 2019 at 08:48:47 AM PST

这是我到目前为止所得到的：

var date = new Date();
var n = date.toDateString();
var time = date.toLocaleTimeString();

document.getElementById('time').innerHTML = n + ' at ' + time;

<div id="time"></div>

所以我已经很接近了。我现在需要的是将日期和月份名称扩展为全名，将

st

/

rd

/

th

添加到日期并将用户的时区附加到其末尾。

Answer 1

此解决方案使用

Intl.DateTimeFormat()

，以便我们可以利用

FormatToParts()

函数，然后应用自定义

map()

，最后

reduce()

以获得所需的输出。

在

map()

函数中，我们附加日期后缀以输出“st”、“nd”、“rd”和“th”。例如。第一、第二、第三、第四。后缀附加到日期本身，而不是相应的

literal

键，因为我们需要知道日期的值，所以这是最简单的路线。

我们替换

literal

值的地方主要是删除多余的逗号（默认情况下），并在时间之前显示

at

。

MDN 参考资料：

• 日期时间格式
• 日期格式选项
• 语言环境参数 -- 我们使用

  undefined

  是为了使用用户的默认值
• 格式转换为零件

const d = new Date();

const formatOptions = {
    weekday: 'long', month: 'long', day: 'numeric', hour: 'numeric',
    minute: 'numeric', year: 'numeric', timeZoneName: 'short', hour12: true
};

// Using Intl.DateTimeFormat so we have access to
//     formatToParts function which produces
//     an Array of objects containing the formatted date in parts
const dateFormat = new Intl.DateTimeFormat(undefined, formatOptions);

// Keep track of 'literal' key counts (`literal` is the separator)
let separatorIndex = 0;

// Where the magic happens using map() and reduce()
const dateString = dateFormat.formatToParts(d).map(({type, value}) => {
      switch (type) {
    case 'literal' :
      separatorIndex++;
      
      switch (separatorIndex) {
        case 3 : // Day separator
          return ' ';
          break;
        case 4 : // Year separator
          return ' at ';
        default: return value;          
      }
      break;
    case 'day' :
      // Append appropriate suffix
      switch (true) {
        case (value.slice(-1) === '1') :
          return value.concat('st');
          break;
        case (value.slice(-1) === '2') :
          return value.concat('nd');
          break;
        case (value.slice(-1) === '3') :
          return value.concat('rd');
          break;
        default: return value.concat('th');
      }
      break;
    case 'hour' :
      // Prepend 0 when less than 10 o'clock
      return (value < 10) ? '0'.concat(value) : value;
      break;
    default: return value;
  }
}).reduce((string, part) => {
  return string.concat(part)
});

// Not part of answer; only for output result
document.write(dateString);

Answer 2

Vanilla JS - 没问题！国际化 API 来救援！ （来自MDN）

var date = new Date(), 
    locale = 'en-US',
    timeZone = 'America/Los_Angeles';

var weekday = new Intl.DateTimeFormat(locale, { weekday: 'long', timeZone }).format(date);
var month = new Intl.DateTimeFormat(locale, { month: 'long', timeZone }).format(date);
var day = new Intl.DateTimeFormat(locale, { day: '2-digit', timeZone }).format(date);

var time = new Intl.DateTimeFormat(locale, 
{
  hour: '2-digit', 
  minute: '2-digit', 
  second: '2-digit',
  hour12: true,
  timeZone

}).format(date);

console.log(`${weekday}, ${month} ${day}th ${date.getFullYear()} at ${time}`);

Answer 3

var date = new Date();
var n = date.toDateString();
var time = date.toLocaleTimeString();
var hours = date.getHours();
var AP = hours >= 12 ? 'PM' : 'AM';

var day = date.getDay();
var weekday = "";
if(day === 0)weekday = "Monday"; else if(day === 1) weekday = "Tuesday" ; 
else if(day === 2) weekday = "Wednesday";  else if(day === 3) weekday = "Thursday";
else if(day === 4) weekday = "Friday"; else if(day === 5) weekday = "Saturday";
else if(day === 6) weekday = "Sunday";

var monthNo = date.getMonth();
var month = "";
if(monthNo === 0)month = "January";
else if(monthNo === 1)month = "February";
else if(monthNo === 2)month = "March";
else if(monthNo === 3)month = "April";
else if(monthNo === 4)month = "May";
else if(monthNo === 5)month = "June";
else if(monthNo === 6)month = "July";
else if(monthNo === 7)month = "August";
else if(monthNo === 8)month = "September";
else if(monthNo === 9)month = "October";
else if(monthNo === 10)month = "November";
else if(monthNo === 11)month = "December";

var dateNo = date.getDate();
var dateletter = "";

if (dateNo > 3 && dateNo < 21) dateletter =  "th"; 
else if(dateNo % 10 === 1) dateletter =  "st"; 
else if(dateNo % 10 === 2) dateletter =  "nd"; 
else if(dateNo % 10 === 3) dateletter =  "rd"; 
else dateletter = "th";


console.log(weekday +", " + month + " " + dateNo + dateletter + " at " + time + " " + 
" " +AP);`

要添加时区，您可以使用 javascript gettimeoffset() 方法来获取时区偏移量。根据它你可以决定时区。