2017-04-26 5 views
0

アプリケーションのユーザーは、自分が仕事をしたいタイムゾーンを選択する必要があります。これは、他のタイムゾーンの顧客に対して排他的に働く可能性があるためです。角度使用にブラウザと異なるタイムゾーンを使用することはできますか?

申請の日付は、UTCで保存されます。

Javascriptでは、utcの日付をローカルの日付として表示するときに、ブラウザのタイムゾーンオフセットが必要になります。これは私が望むものではありません。

日付を表示するために、フィルターがあります。これは、ブラウザのために適用されたオフセットを取り除きます。次に、ユーザー定義のオフセットが適用されます。これは値を表示するために機能します。

サンプルは次のとおりです。ユーザーはUTC + 03:00で座っていますが、アプリケーションの設定はUTC-4:00です。 データベースには、午前6時のUTC値があります。望ましい表示値は6-4 = 2amです。これは、彼のブラウザ(-3)のために適用されたオフセットを除去し、次に彼の設定のオフセットを適用することによって達成される。

  function standardDateFilterInterceptor(date, format, timezone) { 
      if (timezone === "agent") { 
       if (date !== null && date !== undefined) { 
        var momentDate = moment(date.toString(), ["YYYY-MM-DD HH:mm:ss"]); 
        if (momentDate.isValid()) { 
         date = momentDate.toDate(); 
         let offset = date.getTimezoneOffset(); 
         if (offset !== null && offset !== undefined) { 
          offset = offset * 60000 * (-1); 
          const dateWithOffset = new Date(date.getTime() + offset); 
          date = dateWithOffset; 
         } 
        } 
       } 
       if (agentTimeZoneOffset !== null && !angular.isUndefined(agentTimeZoneOffset)) { 
        timezone = agentTimeZoneOffset; 
       } 

      } 
      return originalFilter.apply(this, [date, format, timezone]); 
     } 

値を表示するにはこれは機能していますが、値を更新する方法はありません。サンプルの調整された値(2am)は、スコープ内で終了し、元の6amの値を上書きします。値を3に変更してから2に戻すと、私はそれを見ることができます。これを処理する方法はありますか? DOM要素が変更されたときにスコープに設定されるものを制御すること。

答えて

0

は、私は、ビュー内の値が更新された場合の処理​​指令になってしまった

指令

app.directive('tzAdapterTime', function() { 
    return { 
     require: 'ngModel', 
     link: function ($scope, $element, $attrs, modelCtrl) { 
      modelCtrl.$formatters.push(function (inputValue) { 
       var offset = moment(modelCtrl.$modelValue).parseZone().utcOffset(); 

       return moment(modelCtrl.$modelValue).subtract(offset, 'minute').toDate(); 
      }); 

      modelCtrl.$parsers.push(function (inputValue) { 
       var offset = moment(inputValue).parseZone().utcOffset(); 
       return moment(inputValue).add(offset, 'minute').toDate(); 
      }); 
     } 
    }; 
}); 

ビュー

<input type="datetime-local" ng-model="article.publish" tz-adapter-time > 
関連する問題