UTC日付時刻をローカル日付時刻に変換する


336

サーバーからこの形式の日時変数を取得します6/29/2011 4:52:48 PM。UTC時間です。JavaScriptを使用して、現在のユーザーのブラウザー時間に変換したい。

JavaScriptまたはjQueryを使用してこれをどのように行うことができますか?


ここにコードサンプル:http
Andrew Lewis

1
注意してください。これは奇妙な日付形式なので、使用するソリューションでは必ず指定してください。可能であれば、サーバーにISO形式で日付を送信してもらいます。
Michael Scheper 2017年

回答:


402

JavaScriptで日付に変換する前に、文字列に「UTC」を追加します。

var date = new Date('6/29/2011 4:52:48 PM UTC');
date.toString() // "Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)"

5
function localizeDateStr(date_to_convert_str){var date_to_convert = new Date(date_to_convert_str); var local_date = new Date(); date_to_convert.setHours(date_to_convert.getHours()+ local_date.getTimezoneOffset()); return date_to_convert.toString(); }
マット

4
@mattオフセットを返し分、ない時間、あなたが60で分割する必要がある
bladefist

50
これは、文字列の日付部分が米国の標準mm / dd / YYYYに従っていることを前提としています。これは、ヨーロッパやその他の地域では明らかにそうではありません。
AsGoodAsItGet

7
@digitalbathはChromeでは機能しますが、Firefoxでは機能しません。
Ganesh Satpute 2017


137

私の見解では、サーバーは常に一般的なケースで常に標準化されたISO 8601形式で日時を返す必要があります

詳細はこちら:

この場合、サーバーは'2011-06-29T16:52:48.000Z'JS Dateオブジェクトに直接フィードする結果を返します。

var utcDate = '2011-06-29T16:52:48.000Z';  // ISO-8601 formatted date returned from server
var localDate = new Date(utcDate);

localDate私の場合は2時間後(DK時間)になります右の現地時間になります。

あなたは本当に限り、あなたはサーバから何を期待する形式と一致しているとして、単にものを複雑にし、すべてのこの解析を行う必要はありません。


1
ISO形式の日付を取得する方法?末尾にUTCが追加されたUTC形式の日付を取得しています
Deepika

8
言語に依存する@Colin C#では、上に示すように、ISO-8601形式の文字列を返すDateTimeオブジェクトをフォーマットできます.toString("o")msdn.microsoft.com/en-us/library/zdtaw1bw(v=vs.110).aspx javascriptではnew Date().toISOString()developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Hulvej

98

これは普遍的な解決策です:

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime()+date.getTimezoneOffset()*60*1000);

    var offset = date.getTimezoneOffset() / 60;
    var hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate;   
}

使用法:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received));

クライアントのローカル設定に基づいて日付を表示します。

date.toLocaleString();

41
一部のタイムゾーンでは機能しません。getTimeZoneOffsetが分単位であるのには十分な理由があります。geographylists.com/list20d.html
siukurnin '19

5
@siukurnin。奇妙なタイムゾーンを管理するには、newDate.setTime(date.getTime()+ date.getTimezoneOffset()* 60 * 1000)を使用してください
Guillaume Gendre

18
newDate.setMinutes(date.getMinutes()-date.getTimezoneOffset())で十分です。時間も修正
Lu55 2013年

1
これは、30分のアウトタイムゾーンでは機能しない可能性がありますか?それは丸ごと丸められているようです。
NickG 2016

2
また、タイムゾーンのシフトが午前0時を過ぎると、日付が正しく設定されないようです。おそらくそれは日付に影響を与えないsetHoursのみを使用しているためですか?
ユニフォニック2017

37

クライアントの(UTC)オフセット(分単位)を取得する必要があります。

var offset = new Date().getTimezoneOffset();

そして、サーバーから取得する時間に対応する追加または減算を行います。

お役に立てれば。


2
DSTはどうですか?
リッチ

26

私にとって、上記の解決策は機能しませんでした。

IEでは、UTCの日付時刻のローカルへの変換は少し注意が必要です。私にとって、Web APIからの日時は'2018-02-15T05:37:26.007'ローカルタイムゾーンに従って変換したかったので、JavaScriptで以下のコードを使用しました。

var createdDateTime = new Date('2018-02-15T05:37:26.007' + 'Z');

21

この関数を頭に入れてください:

<script type="text/javascript">
function localize(t)
{
  var d=new Date(t+" UTC");
  document.write(d.toString());
}
</script>

次に、ページの本文の日付ごとに以下を生成します。

<script type="text/javascript">localize("6/29/2011 4:52:48 PM");</script>

GMTとタイムゾーンを削除するには、次の行を変更します。

document.write(d.toString().replace(/GMT.*/g,""));

20

これは私にとってはうまくいきます:

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime() - date.getTimezoneOffset()*60*1000);
    return newDate;   
}

10

ここに投稿された他のいくつかを試しても良い結果は得られませんでしたが、これは私にとってはうまくいくようでした:

convertUTCDateToLocalDate: function (date) {
    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(),  date.getHours(), date.getMinutes(), date.getSeconds()));
}

そして、これはローカル日付からUTCへと逆の方向に機能します:

convertLocalDatetoUTCDate: function(date){
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}

1
使用するコードが少ないnew Date(+date + date.getTimezoneOffset() * 6e4)。;-)
RobG 2018

うまくいきません、utcでの時間は "2020-04-02T11:09:00"なので、シンガポールからこれを試しました、new Date(+ new Date( "2020-04-02T11:09:00")+ new Date( "2020-04-02T11:09:00")。getTimezoneOffset()* 6e4)、間違った時間を与える
AhammadaliPK

これはうまくいきました、新しい日付( "2020-04-02T11:09:00" + 'Z');
AhammadaliPK

10

最後にタイムゾーンを追加します。この場合は「UTC」です。

theDate = new Date( Date.parse('6/29/2011 4:52:48 PM UTC'));

その後、toLocale()*関数ファミリーを使用して、正しいロケールで日付を表示します

theDate.toLocaleString();  // "6/29/2011, 9:52:48 AM"
theDate.toLocaleTimeString();  // "9:52:48 AM"
theDate.toLocaleDateString();  // "6/29/2011"

9

マットの答えは、夏時間はDate()と変換する必要のある日付時刻との間で異なる可能性があるという事実を欠いています-これが私の解決策です:

    function ConvertUTCTimeToLocalTime(UTCDateString)
    {
        var convertdLocalTime = new Date(UTCDateString);

        var hourOffset = convertdLocalTime.getTimezoneOffset() / 60;

        convertdLocalTime.setHours( convertdLocalTime.getHours() + hourOffset ); 

        return convertdLocalTime;
    }

そしてデバッガの結果:

UTCDateString: "2014-02-26T00:00:00"
convertdLocalTime: Wed Feb 26 2014 00:00:00 GMT-0800 (Pacific Standard Time)

9

これをUTCと現地時間の変換に使用し、逆も同様です。

//Covert datetime by GMT offset 
//If toUTC is true then return UTC time other wise return local time
function convertLocalDateToUTCDate(date, toUTC) {
    date = new Date(date);
    //Local time converted to UTC
    console.log("Time: " + date);
    var localOffset = date.getTimezoneOffset() * 60000;
    var localTime = date.getTime();
    if (toUTC) {
        date = localTime + localOffset;
    } else {
        date = localTime - localOffset;
    }
    date = new Date(date);
    console.log("Converted time: " + date);
    return date;
}

3
夏時間の間に何が起こったか。CETタイムゾーン
NovusMobile 2015年


9

これは、Adorjan Princの回答に基づく簡略化されたソリューションです。

function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date);
    newDate.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return newDate;
}

使用法:

var date = convertUTCDateToLocalDate(new Date(date_string_you_received));

なぜこれが2017年10月9日に反対投票されたのですか?私があなたの意見を理解するのを助けるためにコメントを書いてください。
huha 2017

9

使用moment.jsを気にせず、時間がUTCである場合は、以下を使用してください。

moment.utc('6/29/2011 4:52:48 PM').toDate();

あなたの時間がUTCではなく、あなたが知っている他のロケールである場合は、以下を使用してください:

moment('6/29/2011 4:52:48 PM', 'MM-DD-YYYY', 'fr').toDate();

あなたの時間がすでに現地時間である場合は、以下を使用してください:

moment('6/29/2011 4:52:48 PM', 'MM-DD-YYYY');

5

私にとって最も簡単なのは

datetime.setUTCHours(datetime.getHours());
datetime.setUTCMinutes(datetime.getMinutes());

(私は最初の行で十分かもしれないと思いましたが、数分の一秒でオフになっているタイムゾーンがあります)


誰かこれに問題がありますか?これは私にとって最良のオプションのようです。末尾に「(UTC)」が含まれているUTC文字列を取得し、を使用して日付オブジェクトとして設定してから、new Date('date string')これらの2行を追加したところ、サーバーのUTCタイムスタンプに完全に基づく時間で戻ってきたようですユーザーのローカル時間と一致するように調整されます。私も奇妙な1時間の時間帯について心配する必要があります...それが常に完全に保持されるかどうかは
わかり

他の多くのオプションを試しましたが、どれもうまくいきませんでしたが、これはうまくいきました
Sameera K

5

JSON日付文字列(C#でシリアル化)は「2015-10-13T18:58:17」のようになります。

角度で(Hulvejに従って)localdateフィルターを作成します。

myFilters.filter('localdate', function () {
    return function(input) {
        var date = new Date(input + '.000Z');
        return date;
    };
})

次に、次のように現地時間を表示します。

{{order.createDate | localdate | date : 'MMM d, y h:mm a' }}

3

YYYY-MM-DD hh:mm:ssフォーマットの使用:

var date = new Date('2011-06-29T16:52:48+00:00');
date.toString() // "Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)"

YYYY-MM-DD hh:mm:ss形式から変換する場合は、日付がISO 8601形式に従っていることを確認してください。

Year: 
    YYYY (eg 1997)    
Year and month: 
    YYYY-MM (eg 1997-07)
Complete date: 
    YYYY-MM-DD (eg 1997-07-16)
Complete date plus hours and minutes:
    YYYY-MM-DDThh:mmTZD (eg 1997-07-16T19:20+01:00)    
Complete date plus   hours, minutes and seconds:
    YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)    
Complete date plus hours, minutes, seconds and a decimal fraction of a second
    YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00) where:

YYYY = four-digit year
MM   = two-digit month (01=January, etc.)
DD   = two-digit day of month (01 through 31)
hh   = two digits of hour (00 through 23) (am/pm NOT allowed)
mm   = two digits of minute (00 through 59)
ss   = two digits of second (00 through 59)
s    = one or more digits representing a decimal fraction of a second
TZD  = time zone designator (Z or +hh:mm or -hh:mm)

注意すべき重要なこと

  1. 日付と時刻をで区切る必要がありTます。一部のブラウザーではスペースが機能しません
  2. この形式を使用してタイムゾーンを設定する必要があります+hh:mm。タイムゾーンに文字列を使用すると(例: 'UTC')、多くのブラウザでは機能しません。+hh:mmUTCタイムゾーンからのオフセットを表します。

3

@Adorojan's答えはほぼ正しいです。ただし、ブラウザの日付がGMTよりも前である場合、またはその逆の場合、オフセット値は負になるため、オフセットの追加は正しくありません。以下は私が持ってきた解決策であり、私にとって完全にうまく機能しています:

// Input time in UTC
var inputInUtc = "6/29/2011 4:52:48";

var dateInUtc = new Date(Date.parse(inputInUtc+" UTC"));
//Print date in UTC time
document.write("Date in UTC : " + dateInUtc.toISOString()+"<br>");

var dateInLocalTz = convertUtcToLocalTz(dateInUtc);
//Print date in local time
document.write("Date in Local : " + dateInLocalTz.toISOString());

function convertUtcToLocalTz(dateInUtc) {
		//Convert to local timezone
		return new Date(dateInUtc.getTime() - dateInUtc.getTimezoneOffset()*60*1000);
}


3

私にとって、これはうまくいきます

if (typeof date === "number") {
  time = new Date(date).toLocaleString();
  } else if (typeof date === "string"){
  time = new Date(`${date} UTC`).toLocaleString();
}

2

特定のid要素に変換された時間を表示し、日付形式の文字列yyyy-mm-ddを適用する関数が必要な場合、ここでdate1は文字列で、idsはその時間に表示される要素のIDです。

function convertUTCDateToLocalDate(date1, ids) 
{
  var newDate = new Date();
  var ary = date1.split(" ");
  var ary2 = ary[0].split("-");
  var ary1 = ary[1].split(":");
  var month_short = Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
  newDate.setUTCHours(parseInt(ary1[0]));
  newDate.setUTCMinutes(ary1[1]);
  newDate.setUTCSeconds(ary1[2]);
  newDate.setUTCFullYear(ary2[0]);
  newDate.setUTCMonth(ary2[1]);
  newDate.setUTCDate(ary2[2]);
  ids = document.getElementById(ids);
  ids.innerHTML = " " + newDate.getDate() + "-" + month_short[newDate.getMonth() - 1] + "-" + newDate.getFullYear() + " " + newDate.getHours() + ":" + newDate.getMinutes() + ":" + newDate.getSeconds();
            }

私は答えがすでに受け入れられていることを知っていますが、私はここでグーグルの原因を取得し、受け入れられた答えからインスピレーションを得ることで解決しました。


1

@digitalbathの回答に基づいて、UTCタイムスタンプを取得して特定のDOM要素のローカル時間を表示する小さな関数を次に示します(この最後の部分でjQueryを使用)。

https://jsfiddle.net/moriz/6ktb4sv8/1/

<div id="eventTimestamp" class="timeStamp">
   </div>
   <script type="text/javascript">
   // Convert UTC timestamp to local time and display in specified DOM element
   function convertAndDisplayUTCtime(date,hour,minutes,elementID) {
    var eventDate = new Date(''+date+' '+hour+':'+minutes+':00 UTC');
    eventDate.toString();
    $('#'+elementID).html(eventDate);
   }
   convertAndDisplayUTCtime('06/03/2015',16,32,'eventTimestamp');
   </script>

0

UTCエポックを使用してクライアントシステムのタイムゾーンに変換し、それをd / m / YH:i:s(PHPの日付関数のような)形式で返す素敵な小さなスクリプトを書きました。

getTimezoneDate = function ( e ) {

    function p(s) { return (s < 10) ? '0' + s : s; }        

    var t = new Date(0);
    t.setUTCSeconds(e);

    var d = p(t.getDate()), 
        m = p(t.getMonth()+1), 
        Y = p(t.getFullYear()),
        H = p(t.getHours()), 
        i = p(t.getMinutes()), 
        s = p(t.getSeconds());

    d =  [d, m, Y].join('/') + ' ' + [H, i, s].join(':');

    return d;

};

0

あなたはmomentjsを使用することができ、moment(date).format()常にローカル日付で結果を与えます

おまけ、好きなようにフォーマットできます。たとえば

moment().format('MMMM Do YYYY, h:mm:ss a'); // September 14th 2018, 12:51:03 pm
moment().format('dddd');                    // Friday
moment().format("MMM Do YY"); 

詳細については、モーメントjs Webサイトを参照してください。


0

あなたはmoment.jsファイルを使用してそれを成し遂げることができます。

タイムゾーンの場所について言及しただけの簡単なものです。

例:日時をアジア/コルカタのタイムゾーンに変換する場合は、moment.jsから取得したタイムゾーンの場所の名前を指定する必要があります

var UTCDateTime="Your date obtained from UTC";
var ISTleadTime=(moment.tz(UTCDateTime, "Africa/Abidjan")).tz("Asia/Kolkata").format('YYYY-MM-DD LT');


0

すべてのタイムゾーンを現地時間に変換する1つの関数を作成しました。

適切なオフセット値を返さないため、getTimezoneOffset()を使用しませんでした

要件:

1. npm i moment-timezone

function utcToLocal(utcdateTime, tz) {
    var zone = moment.tz(tz).format("Z") // Actual zone value e:g +5:30
    var zoneValue = zone.replace(/[^0-9: ]/g, "") // Zone value without + - chars
    var operator = zone && zone.split("") && zone.split("")[0] === "-" ? "-" : "+" // operator for addition subtraction
    var localDateTime
    var hours = zoneValue.split(":")[0]
    var minutes = zoneValue.split(":")[1]
    if (operator === "-") {
        localDateTime = moment(utcdateTime).subtract(hours, "hours").subtract(minutes, "minutes").format("YYYY-MM-DD HH:mm:ss")
    } else if (operator) {
        localDateTime = moment(utcdateTime).add(hours, "hours").add(minutes, "minutes").format("YYYY-MM-DD HH:mm:ss")
    } else {
        localDateTime = "Invalid Timezone Operator"
    }
    return localDateTime
}

utcToLocal("2019-11-14 07:15:37", "Asia/Kolkata")

//Returns "2019-11-14 12:45:37"

0

私の場合、日付の違いを秒単位で見つける必要がありました。日付はUTC日付文字列だったので、ローカルの日付オブジェクトに変換しました。これは私がやったことです:

let utc1 = new Date();
let utc2 = null;
const dateForCompare = new Date(valueFromServer);
dateForCompare.setTime(dateForCompare.getTime() - dateForCompare.getTimezoneOffset() * 
 60000);
utc2 = dateForCompare;

const seconds = Math.floor(utc1 - utc2) / 1000;

-1
function getUTC(str) {
    var arr = str.split(/[- :]/);
    var utc = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
    utc.setTime(utc.getTime() - utc.getTimezoneOffset()*60*1000)
    return utc;
}

訪問する他の人のために-この関数を使用してUTC文字列からローカル日付オブジェクトを取得し、DSTを処理し、IE、IPhoneなどで動作するようにします。

文字列を分割します(一部のブラウザではJSの日付の解析がサポートされていないため)。UTCとの差を取得し、それをUTC時間から差し引くと、ローカル時間が得られます。返されるオフセットはDSTで計算されるため(間違っている場合は修正してください)、そのため、その時間は変数 "utc"に戻されます。最後に日付オブジェクトを返します。


-1

Angularでは、ベンの答えを次のように使用しました:

$scope.convert = function (thedate) {
    var tempstr = thedate.toString();
    var newstr = tempstr.toString().replace(/GMT.*/g, "");
    newstr = newstr + " UTC";
    return new Date(newstr);
};

編集:Angular 1.3.0は日付フィルターにUTCサポートを追加しました。まだ使用していませんが、簡単なはずです。形式は次のとおりです。

{{ date_expression | date : format : timezone}}

Angular 1.4.3 Date API

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.