角型バインド文字列日付入力型日付

私はAngular 1.6を使用しています。日付をDateに変換してから入力にバインドする代わりに、文字列を型dateの入力に直接バインドしたいと思います。その理由は、サーバーからJSON（他のデータとともに）を取得し、日付の中間変数を作成したくないので、JSONを直接使用したいので、そのままJSONをそのままPOSTすることができます入力フィールドに変更があり、ng-changeを使用して日付を変換してJSONなどを入れない場合... plunkered私の問題があります。ここで角型バインド文字列日付入力型日付

はhtmlです：

<body ng-app="plunker" ng-controller="MainCtrl"> 
    <form name="myForm"> 
    <label for="exampleInput">Date input</label> 
    <input type="date" id="exampleInput" name="input" ng-model="date" placeholder="yyyy-MM-dd"/> 
    </form> 
</body>

そして、ここでは、JavaScriptです：

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.dateString = '2017-01-31'; 
    $scope.date = new Date(2017, 11, 31); 
});

私は変数$ scope.dateへの入力をバインドする場合、それはOKですが、私はバインドした場合、それはKOですそれを変数$ scope.dateStringに渡します。

出典

2017-08-04 Mouss

正しい方法は、あなたがしたい場合は、その後、 'Date'オブジェクトを使用することですその日付を表示するには、フィルタを適用するだけです。 '{{date |日付}} '。 jsonを受け取ったときに、Dateオブジェクトをサービスにインスタンス化できます。 – Hitmands

'ngModelController'関数を使ってカスタムパーサーとビューアを作ることができます。https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example – Icycool

@Hitmands：thanxでも私には答えません。 – Mouss

あなたはこのようなあなたの入力の値属性を使用することによってそれを行うことができます。

angular 
 
    .module('plunker', []) 
 
    .controller('MainCtrl', function($scope) { 
 
    $scope.dateString = '2017-01-31'; 
 
    $scope.date = new Date(2017, 11, 31); 
 
    }) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<section ng-app="plunker" ng-controller="MainCtrl"> 
 
    
 
    <form name="myForm"> 
 
    <label for="exampleInput">Date input</label> 
 
    
 
    <input 
 
     type="date" value="{{dateString | date : 'yyyy-MM-dd'}}" 
 
     ng-model="dateString" placeholder="yyyy-MM-dd" 
 
    /> 
 
    </form> 
 
    
 
</section>

出典

2017-08-04 08:57:20 JeanJacques

thanxと思われます。動作しているようですが、コンソールにエラーがあります。 "エラー：[ngModel：datefmt] http://errors.angularjs.org /1.5.11/ngModel/datefmt?p0=2017-01-31 "とanguarの文書によると： – Mouss

@JeanJacques' $ scopeにエラーが表示されるため、AngularJSはに検証エラーを設定しません。 dateString'はまったく存在してはいけません... '{{date |日付： 'yyyy-MM-dd'}} '代わりに – Hitmands

角型バインド文字列日付入力型日付

答えて

関連する問題