web-dev-qa-db-ja.com

タイムゾーンなしでAngularStrap日付ピッカー値を送信するにはどうすればよいですか？

ユーザーのロケールのタイムゾーン情報を保持せずにAngularStrapのdatepickerを使用できるかどうか疑問に思っています。このアプリケーションでは、有効期限のあるContractオブジェクトを処理します。

契約オブジェクトを追加または編集する場合、日付を選択するための日付ピッカーフィールドがあります。次のことが起こります。

  1. ユーザーが日付を選択します（例：2013-10-24）
  2. Angularはjavascriptの日付オブジェクトをng-modelフィールドにバインドします
  3. バインドされた日付オブジェクトはユーザーのタイムゾーンにあります（例：GMT + 3）
  4. ユーザーがフォームを送信します
  5. 日付はAngularの$ httpサービスを使用してサーバーに送信されます

ステップ5で、日付はUTC形式に変換されます。選択された日付は、真夜中のGMT + 3 2013-10-24でしたが、UTC変換により、日付は午後9時に2013-10-23に変更されます。

変換をどのように防ぐか、プロセス全体でUTC日​​付を使用できますか？ユーザーのローカルタイムゾーンに基づいて契約の日付を変更することは望ましくありません。代わりに、タイムゾーンに関係なく、日付は常に2013-10-24になります。

現在のソリューションは、AngularStrapライブラリに小さな変更を加えて、サーバーに送信されたときに日付が変更されないようにすることでした。

ユーザーが選択したタイムゾーンをサーバーで取得できれば、そこで別の変換を行うことはできますが、サーバーにはその情報がありません。

すべてのアイデアは大歓迎です！

javascriptangularjsdatepickertimezone
41
Janne

問題はAngularStrapではありません。 JavaScriptの日付がどのように機能し、JSONが送信用にフォーマットする方法です。 JavaScriptの日付オブジェクトをJSON文字列に変換すると、文字列がUTCとしてフォーマットされます。

たとえば、私はユタ州にいて、2013-10-24の07:41になりました。新しいJavaScriptの日付を作成してコンソールに出力すると、次のように表示されます。

_Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)
_

同じ日付を文字列化すると（JSON.stringify(date)を使用して、次のようになります：

_"2013-10-24T13:41:47.656Z"
_

確認できるのは、現在のタイムゾーンではなく、UTCです。そのため、フォームがjavascriptオブジェクトからJSON文字列に変換されるときに、フォームがサーバーに送信される直前に変換が行われます。

最も簡単な方法は、日付をサーバーに送信する前に、日付を自分で選択した文字列に変更することです。そのため、JSONで日付をUTCに変更する代わりに（時刻を気にしないと仮定して）、次のようにできます。

_var dateStrToSend = $scope.date.getUTCFullYear() + '-' + ($scope.date.getUTCMonth() + 1) +  '-' + $scope.date.getUTCDate();
_

これにより、_'2013-10-24'_のようなUTCベースの文字列が得られ、時刻情報を含むJSON形式の代わりに、サーバーに送信できます。うまくいけばそれが助けになる。

更新：@Matt Johnsonが言ったように、それを行うには2つの方法があります。あなたは言った：_How could we prevent the conversion, or use UTC dates during the whole process?_。 UTCを使用する場合は、上記の説明を使用してください。 「変換を防ぐ」だけの場合は、次を使用できます。

_var dateStrToSend = $scope.date.getFullYear() + '-' + ($scope.date.getMonth() + 1) +  '-' + $scope.date.getDate();
_
46
tennisgent

少し遅れましたが、これに午後を費やしました。

これを宣言的に行う別の方法は、dateType、dateFormat、modelDateFormat属性を使用することです。これらを設定またはHTMLのいずれかで設定します（例：

angular.module('app').config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults, {
        dateFormat: 'dd-MMMM-yyyy',
        modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
        dateType: "string"
    });
});

DateFormatは、日付ピッカーで日付がユーザーに表示される形式であり、modelDateFormatは、モデルにバインドされる前に変換される形式です。

また、サーバーからのデフォルト値があり、ページのロード時にdatepickerにバインドする必要がありました。そのため、サーバーがJSONで日付をシリアル化した形式をmodelDateFormatと一致するように更新する必要がありました。 Web APIを使用しているため、以下を使用しました。

var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";
16
Bradley MIller

"Angular way"は、 $ filter サービスを使用して、datepickerによって返される日付をフォーマットすることです。

例（HTML）：

{{inpDate | date: 'dd-MM-yyyy'}}

例（JS）：

$scope.processDate = function(dt) {
return $filter('date')(dt, 'dd-MM-yyyy');
}

プランカー ここ

11
WeNeigh