web-dev-qa-db-ja.com

モデルはAngularJSの入力の日付オブジェクトではありません

AngularJSを使用して、入力を使用して日付を表示しようとしていますtype=date：

<input ng-model="campaign.date_start" type="date">

ただし、これにより次のエラーが発生します。

Error: error:datefmt
Model is not a date object

実際には、日付はJSON APIから次の形式で取得されます。

date_start": "2014-11-19"

フィルターを使用して解決できると思いましたが、これは機能せず、同じエラーが表示されます：

 <input ng-model="campaign.date_start | date" type="date">

また、文字列を日付に変換しようとしましたが、再び同じエラーが表示されます：

 $scope.campaign.date_start = Date(campaign.date_start);

他に何ができますか？

javascriptangularjsdate
31
Prometheus

インスタンス化する必要がありますcampaign.date_start with Dateは関数として使用しません。

次のようになります（small demo）：

$scope.campaign.date_start = new Date(campaign.date_start);
21
ryeballar

このディレクティブを使用できます。

angular.module('app')
.directive("formatDate", function(){
  return {
   require: 'ngModel',
    link: function(scope, elem, attr, modelCtrl) {
      modelCtrl.$formatters.Push(function(modelValue){
        return new Date(modelValue);
      })
    }
  }
})

あなたのhtmlで;

<input type="date" ng-model="date" format-date>

$formatters

Array.<Function>

モデル値が変更されるたびに、パイプラインとして実行する関数の配列。関数は逆の配列順序で呼び出され、それぞれが値を次へ渡します。最後の戻り値は、実際のDOM値として使用されます。コントロールに表示する値をフォーマット/変換するために使用されます。

42
cs1707

cs1707のディレクティブは素晴らしいです。ただし、日付のスコープ値がnullまたはundefinedの場合は、1/1/1970で日付を初期化します。これはおそらくほとんどの人にとって最適ではありません

以下は、null/undefinedモデルをそのままにするcs1707のディレクティブの修正バージョンです。

angular.module('app').directive("formatDate", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            modelCtrl.$formatters.Push(function(modelValue) {
                if (modelValue){
                    return new Date(modelValue);
                }
                else {
                    return null;
                }
            });
        }
    };
});

あなたのhtml;

<input type="date" ng-model="date" format-date>

別のオプション

これを日付型のすべての入力に適用する場合、各入力要素にformat-date属性を追加する必要はありません。次のディレクティブを使用できます。 （予期しない方法で他のカスタムディレクティブと対話する可能性があるため、これには注意してください。）

angular.module('app').directive("input", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            if (attr['type'] === 'date'){
                modelCtrl.$formatters.Push(function(modelValue) {
                    if (modelValue){
                        return new Date(modelValue);
                    }
                    else {
                        return null;
                    }
                });
            }

        }
    };
});

あなたのhtml;

<input type="date" ng-model="date">
6
Jakobovski

ここに別のディレクティブソリューション：

//inside directives.js
.directive('dateField', function () {
    return {
        restrict: ' E',
        scope: {
            ngBind: '=ngModel',
            ngLabel: '@'
        },
        replace: true,
        require: 'ngModel',
        controller: function ($scope) {
            if ($scope.ngBind != null) {
                var pattern = /Date\(([^)]+)\)/;
                var results = pattern.exec($scope.ngBind);
                var dt = new Date(parseFloat(results[1]));
                $scope.ngBind = dt;
            };
        },
        templateUrl: 'templates/directives/dateField.html'
    }
})
;

次のようなディレクティブテンプレートを追加します。

<!-- app.directives templates/directives/dateField -->
<script id="templates/directives/dateField.html" type="text/ng-template">    
    <label class="item item-input item-stacked-label ">
        <span class="input-label">{{ngLabel}}</span>
        <input type="date" placeholder="" ng-model="ngBind" />
    </label>
</script>

そしてそれを使用する

<date-field ng-label="This date..." ng-model="datajson.do.date"></date-field>

幸運を！

1
kcho0

ディレクティブを使用してデフォルトangular formatters/parsers by ngModelCtrl.$formatters.length = 0; ngModelCtrl.$parsers.length = 0;

input[type="date"]およびinput[type="time"]に対して機能します。 Cordovaアプリでも機能します

HTML

<input date-input type="time" ng-model="created_time">

角度ディレクティブ：

app.directive('dateInput', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
            //Reset default angular formatters/parsers
            ngModelCtrl.$formatters.length = 0;
            ngModelCtrl.$parsers.length = 0;
        }
    };
});
1
jafarbtech

ディレクティブを使用する別の簡単な方法：

HTML：

<input date-input type="time" ng-model="created_time">

指令：

app.directive('dateInput', function(){
    return {
        restrict : 'A',
        scope : {
            ngModel : '='
        },
        link: function (scope) {
            if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
        }
    }
});
0
Rodolfo Jorge Nemer Nogueira

このエラーを回避するには、実際に日付形式エラーであるこのコードを使用して、日付を関数またはAPIに渡します。

            var options = {
                weekday: "long", year: "numeric", month: "short",
                day: "numeric", hour: "2-digit", minute: "2-digit"
            };
            $scope.campaign.date_start = $scope.campaign.date_start.toLocaleTimeString("en-us", options);

en-us format = Friday、Feb 1、2013 06：00これが他の人の問題解決に役立つことを願っていますが、私はそのようなエラーに直面し、これで解決しました。

0
Usman