Angular Bootstrap UI Datepicker with custom directive $parser causes error: Not a valid date ng model

跟風遠走 提交于 2021-01-29 07:45:57

问题


I am trying to use the angularjs bootstrap ui datepicker directive on an input element that also has another directive that adds a $parser to the model. I get an error because the model object is not a Date object (because the parser causes the mdoel object to be an object with property named, "customValue".

The actual error when I select a date is, "Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date."

I have tried setting the priority on the customFormProp directive, as well as using $parsers.unshift (instead of push), but none seemed to work.

How do I get the angular bootstrap ui datepicker to work correctly on an element that has a directive that sets the model object to a value other than date?

angular.module('app').directive('customFormPropp', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            ngModel.$parsers.push(function toModel(value) {
                return {customValue: value};
            });

            ngModel.$formatters.push(function toView(input) {
                return input.value;
            });
        }
    };
}]);

<p class="input-group">
     <input name="endInterval" type="text" class="form-control" datepicker-popup="{{'MM/dd/yy'}}" ng-model="vm.form.endInterval" custom-form-prop="endInterval" is-open="vm.dates.endOpened" />
         <span class="input-group-btn">
             <button type="button" class="btn btn-default" ng-click="vm.toggleOpenDatePicker($event, 'endOpened')"><i class="fa fa-calendar"></i></button>
         </span>
</p>

来源:https://stackoverflow.com/questions/29980305/angular-bootstrap-ui-datepicker-with-custom-directive-parser-causes-error-not

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!