web-dev-qa-db-ja.com

ユーザーのロケール形式と時間オフセットで日付/時刻を表示する

サーバーは常にHTMLでUTCの日付を提供し、クライアントサイトのJavaScriptでユーザーのローカルタイムゾーンに変換するようにします。

ユーザーのロケール日付形式で出力できる場合のボーナス。

javascriptdatetimetimezone
151
kch

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

いくつかの参照：

152
kch

新しいプロジェクトの場合は、 moment.js を使用するだけです

この質問はかなり古いため、 moment.js はその時点では存在していませんでしたが、新しいプロジェクトの場合、このようなタスクが大幅に簡素化されます。

次のように parse UTCの日付文字列を作成するのが最善です（サーバー上で ISO-8601 互換性のある文字列を作成して、すべてのブラウザで一貫した結果を取得します）：

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

アプリケーションでmを使用するだけで、moment.jsのデフォルトは表示操作のローカルタイムゾーンになります。 日付と時刻の値をフォーマットする多くの方法 があるか、その一部を抽出します。

次のようにユーザーロケールでモーメントオブジェクトをフォーマットすることもできます。

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

Moment.jsオブジェクトを別のタイムゾーン（つまり、ローカルタイムゾーンでもUTCでもないタイムゾーン）に変換するには、 moment.js timezone extension が必要です。このページにはいくつかの例もあり、使用するのは非常に簡単です。

65
theDmi

タイムゾーンにはnew Date().getTimezoneOffset()/60を使用できます。ユーザーのロケールを使用して日付を表示するtoLocaleString()メソッドもあります。

リスト全体を次に示します。 日付の操作

20
jop

日付オブジェクトを作成したら、変換のスニペットを次に示します。

この関数は、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);
}
7
simianarmy

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（）はミリ秒単位であるため、x 60,000になります。

6
Jeremy Chone

過去のプロジェクトで使用したものは次のとおりです。

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
Mark

.getTimezoneOffset()メソッドは、タイムゾーンオフセットを分単位で報告し、GMT/UTCタイムゾーンから「西向き」にカウントし、一般的に慣れているものに対して負のオフセット値をもたらします。 （例：ニューヨーク時間は+240分または+4時間と報告されます）

時間単位の通常のタイムゾーンオフセットを取得するには、以下を使用する必要があります。

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

重要な詳細：
夏時間は結果に考慮されることに注意してください-したがって、この方法で得られるのは実際にはtime offset-実際の地理的なものではありませんtime-zone offset 。

3
Már Örlygsson

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');
3
hriziya

ユーザーのローカルタイムゾーン形式でdbから日付時刻文字列を表示するために、すべての回答を読んでしばらく調査する必要があるため、これまでの回答を混ぜて追加しました。

日時文字列は、python/Django dbからの形式です：2016-12-05T15：12：24.215Z

JavaScriptでのブラウザー言語の信頼できる検出は、すべてのブラウザーで機能するとは思われないため（ ブラウザー言語設定を検出するためのJavaScript を参照）、ブラウザー言語をサーバーから取得します。

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：日時に変換してフォーマットする：

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）：2016年5月12日、14：58

3
Anja

私が遭遇した最良の解決策は、[time display = "llll" datetime = "UTC TIME" /]タグを作成し、javascript（jquery）を使用して、ユーザーの時間に対して解析および表示することです。

http://momentjs.com/ Moment.js

時間をうまく表示します。

2
Daniel

GMTからのタイムゾーンオフセットを分単位で報告する以下を使用できます。

new Date().getTimezoneOffset();

注：-この関数は負の数を返します。

2
dave

getTimeZoneOffset（）とtoLocaleStringは基本的な日付作業に適していますが、実際のタイムゾーンのサポートが必要な場合は、 mde's TimeZone.js をご覧ください。

この質問 への答えで議論されたいくつかのオプションがあります

1
Aeon
// 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);
1
Sergey

日付をローカル日付に変換するには、toLocaleDateString（）メソッドを使用します。

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

時間をローカル時間に変換するには、toLocaleTimeString（）メソッドを使用します。

var time = (new Date(str)).toLocaleTimeString(defaultlang, options);
0
Codemaker