Модель не является объектом даты на входе в AngularJS

Ответ 1

Вам нужно создать экземпляр campaign.date_start с Date, не использовать его как функцию.

Он должен выглядеть примерно так (небольшая демонстрация):

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

Ответ 2

Вы можете использовать эту директиву;

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. Используется для форматирования/преобразования значений для отображения в элементе управления.

Ответ 3

cs1707 велика, за исключением того, что если значение области для даты равно null или undefined, тогда она инициализирует дату с помощью 1/1/1970. Это, вероятно, не оптимально для большинства людей.

Ниже приведена модифицированная версия в директиве cs1707, которая оставит модель null/undefined следующим образом:

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>

Другой вариант

Если вы хотите, чтобы это применимо ко всем входам типа date, тогда нет необходимости добавлять атрибут date-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">

Ответ 4

Другое директивное решение здесь:

//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>

Удачи!

Ответ 5

Еще один простой способ использования директивы:

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);
        }
    }
});

Ответ 6

Вы можете избежать этой ошибки, используя этот фрагмент кода, который на самом деле является ошибкой формата даты, когда мы передаем нашу дату некоторой функции или 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 AM надеюсь, что это поможет другим решить проблему, я столкнулся с такой ошибкой и решил с этим.

Ответ 7

Использование директивы для reset по умолчанию angular formatters/parsers на 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">

Angular Директива:

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;
        }
    };
});