以用户的语言环境格式和时间偏移显示日期/时间

时间:2008-09-17 16:37:12

标签: javascript datetime timezone

我希望服务器始终在HTML中提供UTC日期,并在客户端站点上使用JavaScript将其转换为用户的本地时区。

如果我能以用户的区域设置日期格式输出,则获得奖励。

16 个答案:

答案 0 :(得分:152)

似乎从UTC日期开始最简单的方法是创建一个新的Date对象,并使用setUTC…方法将其设置为您想要的日期/时间。

然后各种toLocale…String方法将提供本地化输出。

实施例

// This would come from the server.
// Also, this whole block could probably be made into an mktime function.
// All very bare here for quick grasping.
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);

console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
console.log(d.toLocaleDateString());   // -> 02/28/2004
console.log(d.toLocaleTimeString());   // -> 23:45:26

一些参考文献:

答案 1 :(得分:65)

对于新项目,只需使用moment.js

这个问题已经过时了,所以moment.js当时并不存在,但对于新项目,它简化了很多这样的任务。

最好是parse来自UTC的日期字符串,如下所示(在服务器上创建一个ISO-8601兼容的字符串,以便在所有浏览器中获得一致的结果):

var m = moment("2013-02-08T09:30:26Z");

现在只需在应用程序中使用m,moment.js默认使用本地时区进行显示操作。有many ways to format the date and time values或提取部分。

您甚至可以在用户区域设置中格式化矩形对象,如下所示:

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us

要将moment.js对象转换为不同的时区(即既不是本地时区也不是UTC),您需要moment.js timezone extension。该页面还有一些示例,使用起来非常简单。

答案 2 :(得分:20)

您可以使用new Date().getTimezoneOffset()/60作为时区。还有一种toLocaleString()方法,用于使用用户的区域设置显示日期。

以下是整个列表:Working with Dates

答案 3 :(得分:7)

构建完日期对象后,这里是转换的片段:

该函数采用UTC格式的Date对象和格式字符串 您需要一个Date.strftime原型。

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}

答案 4 :(得分:5)

以下是我在过去的项目中使用的内容:

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');

答案 5 :(得分:4)

在JS中,除了如上所述转换每个属性之外,没有简单和跨平台的方式来格式化本地日期时间。

这是我用来获取当地YYYY-MM-DD的快速黑客攻击。请注意,这是一个黑客攻击,因为最终日期将不再具有正确的时区(因此您必须忽略时区)。如果我还需要其他任何东西,我会使用moment.js。

var d = new Date();    
d = new Date(d.getTime() - d.getTimezoneOffset() * 60000)
var yyyymmdd = t.toISOString().slice(0,0); 
// 2017-05-09T08:24:26.581Z (but this is not UTC)

d.getTimezoneOffset()以分钟为单位返回时区偏移量,d.getTime()以ms为单位,因此为x 60,000。

答案 6 :(得分:3)

.getTimezoneOffset()方法报告时区偏移(以分钟为单位),从GMT / UTC时区向“向西”计数,从而产生与通常习惯的偏移值相反的偏移值。 (例如,纽约时间报告为+240分钟或+4小时)

要获得以小时为单位的正常时区偏移,您需要使用:

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

重要细节:
请注意,结果会考虑夏令时 - 因此,此方法为您提供的实际上是时间偏移 - 而不是实际的地理时区偏移。

答案 7 :(得分:3)

使用PHP代码的日期我使用了类似的东西..

function getLocalDate(php_date) {
  var dt = new Date(php_date);
  var minutes = dt.getTimezoneOffset();
  dt = new Date(dt.getTime() + minutes*60000);
  return dt;
}

我们可以这样称呼它

var localdateObj = getLocalDate('2015-09-25T02:57:46');

答案 8 :(得分:3)

我将答案混合到目前为止并添加到它,因为我必须阅读所有这些并进一步调查一段时间以用户的本地时区格式显示db的日期时间字符串。

日期时间字符串来自python / django数据库,格式为:2016-12-05T15:12:24.215Z

在JavaScript中可靠地检测浏览器语言似乎并不适用于所有浏览器(请参阅JavaScript for detecting browser language preference),因此我从服务器获取浏览器语言。

Python / Django:将请求浏览器语言作为上下文参数发送:

language = request.META.get('HTTP_ACCEPT_LANGUAGE')
return render(request, 'cssexy/index.html', { "language": language })

HTML:将其写入隐藏的输入中:

<input type="hidden" id="browserlanguage" value={{ language }}/>

JavaScript:获取隐藏输入的值,例如en-GB,en-US; q = 0.8,en; q = 0.6 /然后只通过替换和正则表达式获取列表中的第一种语言

const browserlanguage = document.getElementById("browserlanguage").value;
var defaultlang = browserlanguage.replace(/(\w{2}\-\w{2}),.*/, "$1");

JavaScript:转换为datetime并格式化:

var options = { hour: "2-digit", minute: "2-digit" };
var dt = (new Date(str)).toLocaleDateString(defaultlang, options);

请参阅:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

结果是(浏览器语言为en-gb):05/12 / 2016,14:58

答案 9 :(得分:2)

您可以使用以下内容,以分钟为单位报告GMT的时区偏移量:

new Date().getTimezoneOffset();

注意:   - 此函数返回负数。

答案 10 :(得分:2)

我遇到的最佳解决方案是创建[time display =“llll”datetime =“UTC TIME”/]标签,并使用javascript(jquery)解析并相对于用户的时间显示它。

http://momentjs.com/ Moment.js

会很好地显示时间。

答案 11 :(得分:2)

2021 - 您可以使用浏览器原生 Intl.DateTimeFormat

const utcDate = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(new Intl.DateTimeFormat().format(utcDate));
// expected output: "21/04/2021", my locale is Switzerland

以下直接来自文档:

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
// Results below assume UTC timezone - your results may vary

// Specify default date formatting for language (locale)
console.log(new Intl.DateTimeFormat('en-US').format(date));
// expected output: "12/20/2020"
    
// Specify default date formatting for language with a fallback language (in this case Indonesian)
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
// expected output: "20/12/2020"
    
// Specify date and time format using "style" options (i.e. full, long, medium, short)
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));
// Expected output "Sunday, 20 December 2020 at 14:23:16 GMT+11"

答案 12 :(得分:1)

getTimeZoneOffset()和toLocaleString适用于基本日期工作,但如果您需要实时区域支持,请查看mde's TimeZone.js

this question

的答案中讨论了更多选项

答案 13 :(得分:1)

// new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]])
var serverDate = new Date(2018, 5, 30, 19, 13, 15); // just any date that comes from server
var serverDateStr = serverDate.toLocaleString("en-US", {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
})
var userDate = new Date(serverDateStr + " UTC");
var locale = window.navigator.userLanguage || window.navigator.language;

var clientDateStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});

var clientDateTimeStr = userDate.toLocaleString(locale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log("Server UTC date: " + serverDateStr);
console.log("User's local date: " + clientDateStr);
console.log("User's local date&time: " + clientDateTimeStr);

答案 14 :(得分:0)

要将日期转换为本地日期,请使用toLocaleDateString()方法。

<CheckBox
  style={styles.checkBox}
  value={this.state.checked}
  onChange={() => this.onChangeCheck()} />

要将时间转换为本地时间,请使用toLocaleTimeString()方法。

var date = (new Date(str)).toLocaleDateString(defaultlang, options);

答案 15 :(得分:-8)

不知道如何做区域设置,但javascript是客户端技术。

usersLocalTime = new Date();

将在其中包含客户的时间和日期(由他们的浏览器报告,并通过扩展他们所在的计算机)。将服务器的时间包含在响应中并进行一些简单的数学运算来估算偏移量应该是微不足道的。