将 Bootstrap datepicker 指令转换为 AngularJS Material

Question

我有 angularjs 的初学者知识，并且在将使用 Bootstrap 模板的 Datepicker 指令转换为 AngularJS 材料时遇到问题。原始的 Bootstrap 模板如下所示：

template:
        '<div ng-class="{\'input-group\': !snDisabled, \'has-error\': isInvalid}" style="width: 100%;">' +
        '<input type="text" name="{{field.name}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="formattedDate" ng-model-options="{updateOn: \'blur\', getterSetter: true}" ng-disabled="snDisabled" />' +
        '<span class="input-group-btn" ng-hide="snDisabled">' +
        '<input type="hidden" class="datepickerinput" ng-model="formattedDate" ng-readonly="true" />' +
        '<button class="btn btn-default" type="button">' +
        '<glyph sn-char="calendar" />' +
        '</button>' +
        '</span>' +
        '</div>',

但是，我已将其更新为 AJS 材料：

template: '<div ng-class="{\'input-group\': !snDisabled, \'has-error\': isInvalid}" style="width: 100%;">' +
            '<md-datepicker md-open-on-focus name="{{field.name}}" md-placeholder="{{field.placeholder}}" ng-model="formattedDate" ng-model-options="{updateOn: \'blur\', getterSetter: true}" ng-disabled="snDisabled"/>' +
            '</div>',

当我加载页面并检查控制台时，我看到一个错误“TypeError: Cannot read property 'setDate' of undefined”

回到代码中，我意识到它调用了页面 input-group-btn 上的一个类元素，它没有出现在 AngularJS Material 中：

link: function(scope, element, attrs, ngModel) {
            var includeTime = scope.snIncludeTime;
            var format;
            format = includeTime ? dateTimeFormat.trim() : dateFormat.trim();
            format = format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
            var dp = element.find('.input-group-btn').datetimepicker({
                keepInvalid: true,
                pickTime: scope.snIncludeTime === true,
                format: "X"
            }).on('dp.change', onDpChange);

            function onDpChange(e) {
                scope.formattedDate(e.date.format(format));
                if (!scope.$root.$$phase)
                    scope.$apply();
            }

            function validate(formattedDate) {
                scope.isInvalid = false;
                if (formattedDate == null || formattedDate == '') {
                    dp.data('DateTimePicker').setValue(new Date());
                    return '';
                }
                if (isValidDate(formattedDate, format)) {
                    dp.data('DateTimePicker').setDate(moment(formattedDate, format));
                } else if (isValidDate(formattedDate, moment.ISO_8601)) {
                    var date = moment.utc(formattedDate).clone().local();
                    dp.data('DateTimePicker').setDate(date);
                    formattedDate = date.format(format);
                } else {
                    scope.isInvalid = true;
                }
                return formattedDate;
            }
            if (ngModel) {
                ngModel.$parsers.push(validate);
                ngModel.$render = function() {
                    validate(ngModel.$viewValue);
                };
                scope.formattedDate = function(formattedValue) {
                    if (angular.isDefined(formattedValue)) {
                        ngModel.$setViewValue(formattedValue);
                        if (scope.snChange) scope.snChange({
                            newValue: formattedValue
                        });
                    }
                    return ngModel.$viewValue;
                };
            } else {
                scope.formattedDate = function(formattedValue) {
                    if (angular.isDefined(formattedValue)) {
                        scope.field.value = validate(formattedValue);
                        if (scope.snChange) scope.snChange({
                            newValue: formattedValue
                        });
                    }
                    return scope.field.value;
                };
                scope.$watch('field.value', function(newValue, oldValue) {
                    if (newValue != oldValue)
                        validate(newValue);
                });
            }
            scope.$on('$destroy', function() {
                dp.off('dp.change', onDpChange);
            });
        }
    };
}

为了让我的 AngularJS Material 模板正常工作，我必须在上面的代码中进行哪些修改？

Answer 1

你可以使用这个 jquery 插件代替 Bootstrap，它与 Angular 非常兼容 https://jqueryui.com/datepicker/

我推荐它，因为我总是在我的 Angular 项目中使用它。

在此处查看文档以及如何使用： http://api.jqueryui.com/datepicker/