AngularJS - ビューに日付オブジェクトを表示できません

私のビューに日付オブジェクトを表示しようとしています。AngularJS - ビューに日付オブジェクトを表示できません

私は、これらのドキュメントを追っ：https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

しかし、成功せず。

私は文字通り同じコードがあります（EDIT：削除しましcontrollerAs構文をして$スコープを追加しました）

<input type="date" name="birthDate" ng-model="example.value" 
    placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />

と私のオブジェクト：

$scope.example = { 
    value: new Date(2013, 9, 22) 
};

しかし、それでもまだ、私はエラー

Error: [ngModel:datefmt] Expected 2013-10-22 to be a date

を取得

誰でもこの問題の原因を知っていますか？私はオンラインで見てみましたが、私が見つけたすべての答えは、Dateオブジェクトが無効であると言っていました。 http://jsfiddle.net/j2kof5at/

私が見出力で：は

多くの人が私の問題が何であるかを理解する問題があるので、私はjsfiddleで説明してみましょう：

はEDIT（または??それをあります） '22 -10-2014 'の代わりに' dd-mm-2013 'どうしてこれなの？

EDIT 2：（SOLUTION）私が試したソリューションの

一つは、私のプロジェクトに角度入力日付モジュールを追加することによってでした。私はちょうど私のプロジェクトからこれを削除し、問題が解決したかのように思えます。このモジュールのドキュメントを読んで、私が見つかりました：

The latest stable version of AngularJS (~1.2.26) has no support for input[type="date"]. The support was added only for 1.3 branch of Angular, which is now in beta.

私がこれをネイティブにサポートが既にあり、このモジュールは、実際に問題を引き起こしていた角度の1.5.xを使用していますので。それは、オブジェクトNG-モデル=「ユーザー .example.value」をチェックし、角1.0.1

出典

2016-11-14 Max Taylor

たぶん 'that.example.value'代わりに' user.example.value' –

http://jsfiddle.net/lbclucascosta/8a7ppg4x/ –

いいえ、that.example.valueは基本的に$ scope.example.valueであり、ControllerAsの構文でUserControllerをユーザーとして使用します –

angModule.directive('moDateInput', function ($window) { 
    return { 
     require:'^ngModel', 
     restrict:'A', 
     link:function (scope, elm, attrs, ctrl) { 
      var moment = $window.moment; 
      var dateFormat = attrs.moDateInput; 
      attrs.$observe('moDateInput', function (newValue) { 
       if (dateFormat == newValue || !ctrl.$modelValue) return; 
       dateFormat = newValue; 
       ctrl.$modelValue = new Date(ctrl.$setViewValue); 
      }); 

      ctrl.$formatters.unshift(function (modelValue) { 
       if (!dateFormat || !modelValue) return ""; 
       var retVal = moment(modelValue).format(dateFormat); 
       return retVal; 
      }); 

      ctrl.$parsers.unshift(function (viewValue) { 
       var date = moment(viewValue, dateFormat); 
       return (date && date.isValid() && date.year() > 1950) ? date.toDate() : ""; 
      }); 
     } 
    }; 
});

出典

2016-11-14 10:33:00 rani

ヘルプ..... ..... – rani

これを最後の手段として試してみることもできますが、私は勉強しようとしていますそれがなぜ機能していないのか、これは本当に助けにはならない。私は日付STRINGを持っていて、それをDateオブジェクトとしてビューに表示したいと思います。このディレクティブは、さまざまな出力形式で日付を解析するためのものです。 –

を使用しているので、私のjsfddleは、働いていない理由はまた、あなたが内部のユーザーオブジェクトを初期化した説明しますコントローラ。

//コントローラの内部

$ scope.user = {}; $ scope.user.example = {値：新しい日付（ "2013年9月22日"）}

出典

2016-11-14 10:37:13

あなたは私を助けようとしているだけですが、私の投稿を読んでもらえますか？ –

はい私は持っています。 $ scope.user = {}がコントローラの関数の中に記述されているかどうかを確認するように要求しています –

何も変更されませんでした。私の見解は正しい変数を読み込んでいます。そうでなければ、私の日付は「エラー：[ngModel：datefmt] 2013-10-22が日付であると予想されます。 user.example.value = $ scope.example.value –

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 
     $scope.user = {}; 
 
    $scope.user.example = { 
 
    value: new Date("September 22, 2013") 
 
}; 
 
    })

<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <input type="date" name="birthDate" ng-model="user.example.value" 
 
    placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required /> 
 

 
    </div> 
 
</body> 
 

 
</html>

出典

2016-11-14 10:40:31

ありがとうございました。 UserControllerをユーザ構文として使用しています（これは質問に明記されており、コメントに記載されています）。 –

AngularJS - ビューに日付オブジェクトを表示できません

答えて

関連する問題