将引导日期选择器包装为指令答案

【问题标题】：wrapping bootstrap datepicker as a directive将引导日期选择器包装为指令
【发布时间】：2014-12-29 15:04:19
【问题描述】：

我正在尝试使用 angular 指令包装引导日期选择器除了常见的日期选择器之外，此日期选择器还包含用于显示的不同日期格式和用于 ng-model 的不同日期格式。

得到一个错误：

 Error: [$rootScope:inprog] $digest already in progress

我的代码贴在下面：

app.directive('ngDatePicker', function () {
return {//this datePicker will show the date in the wanted format and save it (ng-model) with the default format of yy-mm-dd
    template: "<span><input id='displayDate' class={{class}} type='text'/><input id='hiddenDate' type='text' style='display:none'/></span>",
    require: 'ngModel',
    replace: true,
    scope: {
        ngModel: '=',
        class: '@'
    },
    link: function (scope, element, attrs, ngModelCtrl) {
        // set date pickers - this datePicker 
        var displayInput = element.find('#displayDate');
        var hiddenInput = element.find('#hiddenDate');
        var options = {};
        options.minDate = new Date();
        options.format = "yyyy-MM-dd";
        options.autoclose = 'true';
        displayInput.datepicker(options);

        displayInput.datepicker().on('changeDate', function () {
            //update the ng-model 
            var changedDate = displayInput.datepicker("getDate");
            var newDate = converDateToDefault(changedDate);
            if (scope.ngModel != newDate) {
                scope.$apply(function () {
                    hiddenInput.val = newDate;
                    scope.ngModel = newDate;
                });
            }
        });

        scope.$watch("ngModel", function (newVal) {
            if (typeof newVal !== undefined && newVal != null && newVal != "") {
                displayInput.datepicker('destroy');
                var option = {};
                option.format = "yyyy-MM-dd";
                displayInput.datepicker(option);
                var convertedVal = converDateToDefault(displayInput.datepicker("getDate"));
                if (convertedVal != "Invalid date" && newVal != convertedVal) {
                    displayInput.datepicker("setDate", convertDate(newVal));
                    hiddenInput.val = newVal;
                }
            }
        }, true);
    }
};

});

谢谢

【问题讨论】：

标签： javascript jquery angularjs datepicker

【解决方案1】：

为什么要重新发明轮子？使用ui-bootstrap 指令datepicker - http://angular-ui.github.io/bootstrap/#/datepicker

【讨论】：

我需要使用不同的日期格式来显示日期选择器，并为 ng-model 使用不同的日期格式
请问，怎么办？从他们的文档中我看不出他们支持此功能（差异显示和数据格式）
将自定义格式字符串传递给datepicker-popup属性，see

【解决方案2】：

顺便说一句，你原来的问题是因为

       scope.$apply(function () {
                hiddenInput.val = newDate;
                scope.ngModel = newDate;
            });

你可以通过包装作用域来解决它。$apply

 if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
       scope.$apply(function () {
                hiddenInput.val = newDate;
                scope.ngModel = newDate;
            });
  }

【讨论】：