web-dev-qa-db-ja.com

angular $ http.post日付をUTC日付に変更

日付のあるREST apiにデータを投稿しようとしました。デバッグ中、日付パラメーターはタイムゾーンの正しい日付を持つJS Dateオブジェクトです：Tue Apr 04 2017 00:00:00 GMT+0530

それが私のコードを離れ、ネットワークタブに同じものが表示された後、UTC日付に変換されます："2017-04-03T18:30:00.000Z"

私が行ったindex.htmlにangularのロケールファイルを含める必要があるに従ってソリューションを検索しました：

<script type="text/javascript" src="resources/js/angular/angular-locale_en-in.js"></script>

しかし、それは役に立ちません。フィルターに日付形式を追加するなどのソリューションを見てきましたが、グローバルなソリューションが必要です。助けがありますか？ありがとう：）

javascriptangularjsinternationalizationtimezone
22
pranavjindal999

日付、時間、およびタイムゾーンの処理も私を混乱させました。この答えがあなたにそれらをどのように扱うことができるかについての洞察を与えるかもしれません。

Chromeのデベロッパーコンソールで次のコードを試して、同じ日付が異なる形式でどのように表示されるかを確認してください。

_var date = new Date();
date.toISOString(); // "2017-04-29T09:54:28.714Z"
date.toGMTString(); //"Sat, 29 Apr 2017 09:54:28 GMT"
date.toLocalString(); //"4/29/2017, 3:24:28 PM"
_

クライアントで作成した日付は、常にタイムゾーンオフセットがゼロの日付、つまり_UTC+/-00:00 Z_を記録します。簡単にするために、UTCとGMTを同じと考えるかもしれません。表示目的に関しては、ブラウザのタイムゾーンに従って同じ日付が表示されます。 console.log (date)を実行するとSat Apr 29 2017 15:24:28 GMT+0530 (IST)が出力されますが、それは日付の内部記録がブラウザのタイムゾーンに従っているという意味ではありません。ブラウザのタイムゾーンごとに画面/コンソールに表示されるだけです。

日付表現は、あるタイムゾーンから別のタイムゾーンに変換されるものとしてではなく、同じ日付の異なる表現として見てください。ブラウザでは、_GMT+0530_オフセットとして表され、サーバーに送信されると、タイムゾーンオフセットがゼロの同じ日付になります。

コメントによると、GMT + 0530タイムゾーンで午前4時に午前4時に選択した場合、内部的には4月3日18:30にPMになります。つまり、タイムゾーンオフセットはゼロになります。そのままサーバーに送ってください。この日付を使用する必要がある場合、サーバーから4月3日に返され、ブラウザのタイムゾーンオフセットに従ってブラウザに表示されます。変換は行われません。異なる表現を持つ1つの日付です。

私はかつて 関連する質問 を尋ねましたが、これはより明確になるでしょう。

全体として、この答えは@geminiousgoelおよび@charlietflの答えと同じです。

13
Ritesh Jagga

シナリオ：

UI文字列ではなく、API call（UNIX Time）としてdateからEpoch timeに日付を送信します。 getTime（） メソッドを使用して、日付をエポック時間に変換できます。

var dateStr = "Tue Apr 04 2017 00:00:00 GMT+0530";

var dateEpoch = new Date(dateStr).getTime();

console.log(dateEpoch); // 1491244200000 (Local Time)

受信側で、彼らはこのEpoch time（UNIX時間）をDateに再び変換する必要があります。 UIから渡されるローカルの日付と時刻。

サンプルのスクリーンショットenter image description here

3
Rohit Jindal

Charlietflが提案したように、おそらくグローバルハックはDate.prototype.toJSON（）メソッドをオーバーライドすることですが、それは良い習慣ではありません。

$ http.post呼び出しをどこで使用していますか？ $ httpリクエストを送信するのに最適な場所は、サービス内です。サービスを使用する場合、「public」メソッドと「private」メソッドを使用できるように、パブリックサービスAPIをラップすることをお勧めします。これらは、データ変換、検証などの一般的な操作を実行するユーティリティです。

angular.service('bookStoreService', ['$http'], function($http) {
    var normalizeBooks = function(booksArray){
        booksArray.forEach(function(book){  
            // do something on the book
        });
    };

    var updateBooks = function(books){
       normalizeBooks(books);
       $http.post('myurl', books);
    };

    return {
       updateBooks : updateBooks
    };
});
3
Redd Sanso

必要な形式で文字列として使用することができます（使用するAPIが文字列を受け入れる場合）、「Tue Apr 04 2017 00:00:00 GMT + 0530」と言い、文字列としてバックエンドに保存しますそれを取得すると、それは文字列になり、どのような方法でも変更されません。

3
Ahmad Abo Saa

UTC日付をサーバーに渡すことが望ましい動作です。クライアントAPIは、日付がすべてローカル日付であると想定するのではなく、UTC時間を処理することになっています。

しかし、とにかく、ローカルタイムゾーンに基づいて日付を文字列に変換し、文字列をサーバーに渡すことができます。

3
Dada

アプリにangle-locale_en-in.jsライブラリーを追加しましたか？このようなもの....

angular.module('myAngularApp', [
    'ngLocale'])

そうしないと、jsライブラリはangularアプリケーションに影響を与えません。

2
Gi1ber7

ジンダルサーブ、これはこうなります。日付ピッカーで日付を選択するか値を渡すと、元のローカル日付が使用されますが、その値をさらに渡すとUTCに変換されるため、受信側で再びローカルゾーンに変換する必要があります。データベースはUTC形式で日時を保存します。

2
geminiousgoel

ブラウザがUTC日付に変換するように、最後にUTCを追加します

var dateToServer =new Date(dateFromUser+" UTC");これでdateToServerはUTC DateTime形式になります。

0
Sharan Rai

JSONシリアライザーは文字列から日付を解析します。クライアントでは、日付プロパティはブラウザーのタイムゾーンのローカル日付として保存されます。オブジェクトをサーバーに投稿すると、すべての日付プロパティがutc文字列に変換されます。ほとんどの場合、それは適切な行動です。ただし、サーバーのタイムゾーンで日付を設定して送信する必要がある場合があります。多くの場合、日付のない時間のみを設定する必要がある場合に必要です。その場合は、文字列プロパティを定義して手動で設定する必要があります。私はこのトリックを大抵適用します。

class Obj{
 d: Date
}

class ObjDto{
 constructor(obj: Obj){
   this.d= dateTimeToIsoLocalDateString(obj.d)
 }
 d: string
}

...

export function DateTimeToDate(date) {
    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
}

export function dateTimeToIsoLocalDateString(dateTime: Date): string {
    if (dateTime === null) {
        return null;
    }
    let date = DateTimeToDate(dateTime);
    let res = date.toISOString().replace("Z", "");
    return res;
}

このテーマをさらに理解するために、これを学ぶことができます topic

0
trueboroda