パースの日付文字列

Question

角度UIブートストラップ日付ピッカーをロードするとき、私は角度のUIブートストラップ日付ピッカーを使用しています： https://angular-ui.github.io/bootstrap/#/datepicker

私は、サーバーから受信したデータを使用してフォームをレンダリングする場合、日時フィールドに問題があります。私の入力日付ピッカーは次のようになります。私はモデル$scope.item = response;に応答データを割り当てると

{  
    ... 
    startedAt: "2015-05-29T02:00:00+0200" 
} 

、DatePickerの入力フィールドが正しくレンダリングされる（正確な日付は次のとおりです。

<form name="itemForm"> 
    <input type="datetime" class="form-control" id="startedAt" name="startedAt" 
      ng-model="item.startedAt" 
      ng-click="open($event, 'startedAt')" 
      uib-datepicker-popup="yyyy-MM-dd" 
      is-open="datepickers.startedAt" 
    /> 
</form> 

私のサーバーは、JSON文字列として応答日時を返します。選択されたフォーマットで適切にフォーマットされています）。問題は、検証が合格しないことです。私が取得：

itemForm.startedAt.$invalid == true 

私は（$scope.item.startedAtがDateで、私は日付ピッカーから新しい日付を選択した場合）DatePickerのフィールドにバインドされたデータは、Dateオブジェクトではなく文字列でなければならないことに気づい

私は回避するために管理しました

$scope.item = response; 
$scope.item.startedAt = new Date($scope.item.startedAt); 

は、それがこのように動作します...しかし、私は手動で文字列が、私は、サーバーからの応答を取得するたびに日付を行うに変換したくない：この問題は、コントローラでこれを行うと。私はそれが私のためng-modelを変換して、私はDatePickerの入力フィールドに割り当てることができ、ディレクティブを作成しようとしました：

.directive("asDate", function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, modelCtrl) { 

      modelCtrl.$formatters.push(function (input) { 

       var transformedInput = new Date(input); 

       if (transformedInput != input) { 
        modelCtrl.$setViewValue(transformedInput); 
        modelCtrl.$render(); 
       } 

       return transformedInput; 
      }); 
     } 
    } 
}) 

まあ、それは動作しますが、今、私は私の見解でDateオブジェクト、I出力モデルを見ることができるので、 ：{{item.startedAt}}。しかし、まだの妥当性検査は失敗します！私は、モデルとビューの間でデータがどのように流れるか、そしてUI Bootstrapがその中にどのように繋がっているかを理解している私にはいくつかの問題があると思われます。私は$formatters.pushから$formatters.unshiftに自分のディレクティブを変更したときに

はまた、検証がOKに動作しますが、日付ピッカーは、これは角のよう破った

Answer 1

これは意図的なものであるためangle-ui-bootstrap datepickerの動作（https://github.com/angular-ui/bootstrap/issues/4690）、Angular service/factoryとmomentライブラリを使用しました。

サービスサービスは、すべてのHTTP要求/応答を傍受したり、目的のコントローラだけを傍受するためにグローバルに注入できます。

ここでは、REST APIへのリクエストを処理するためにRestangularライブラリを使用しています。したがって、オブジェクトのプロパティのみを受け取り、Restangularメソッド/プロパティではないresponse.plain()メソッドです。

var Services = angular.module('app.Services', []); 

Services 
    .factory('dateConverter', ['dateFilter', function (dateFilter) { 

     var dateConverter = {}; 

     dateConverter.prepareResponse = function (response) { 
      for(prop in response.plain()) { 
       if (response.hasOwnProperty(prop)) { 
        if(moment(response[prop], moment.ISO_8601, true).isValid()) { 
         response[prop] = new Date(response[prop]); 
        } 
       } 
      } 
      return response; 
     }; 

     dateConverter.prepareRequest = function (item) { 
      for(prop in item.plain()) { 
       if (item.hasOwnProperty(prop)) { 
        if(angular.isDate(item[prop])){ 
         item[prop] = dateFilter(item[prop] , "yyyy-MM-ddTHH:mm:ssZ") 
        } 
       } 
      } 
      return item; 
     }; 

     return dateConverter; 
    }]) 
; 

Answer 2

（うまくyyyy-MM-ddをformattetのinsted私は入力内のISO文字列を参照してください）私の日時をフォーマットしません。 UI.Bootstrap v0.13.2（8-2-2015） 私は今日立ち往生しているところですが、0.13.1にダウングレードしています。

Wesleychoは、誰もが

が...すぐにこれを投稿した後、私は非角度ダウンした提案を持っている場合、これは意図的に私は文字列をサポートし、他の日付ピッカーのための準備ができてい https://github.com/angular-ui/bootstrap/issues/4690

を行われていたと言います私は誇りに思っていませんが、HTML5 type = "date"とuib-datepicker-popupの両方で動作します。私は、文字列が私が見た2つのシリアル化された日付書式の1つと似ているかどうかを判断する正規表現を持っていて、jsonツリーをたどり、その文字列をDate（）で置き換える再帰的なjavascript関数を持っています。あなたは$ scope（またはviewmodel）を入れる直前にそれを呼び出すでしょう...

$http.get("../api/comm/" + commId 
    ).success(function (resp) { 
     fixDates(resp); 
     vm.comm = resp; 
    }); 

（私は文字列の長さをチェックする必要はありませんが、私は、文字列が明らか日付でない場合、それは正規表現を実行していないことにより、いくつかのCPUサイクルを惜しまと考えました）

//2015-10-01T00:00:00-04:00 
//2015-11-20T18:15:56.6229516-05:00 
var isDate = new RegExp("\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d{7})?-\\d{2}:00"); 

function fixDates(json) { 
    for (i in json) 
     if (typeof (json[i]) == "object") 
      fixDates(json[i]); 
     else if (typeof (json[i]) == "string" && (json[i].length == 25 || json[i].length == 33) && isDate.test(json[i])) 
      json[i] = new Date(json[i]); 
}; 

Answer 3

あなたは、restangularトランスに日に私たちはここに正確に同じ問題を抱えている。この

RestangularConfigurer 
    .addElementTransformer('<RESTRESOURCENAME>', false, function (element) { 
     element.createDate = new Date(element.createDate); 
     return element; 
    })