AngularJS UI Bootstrap DatePicker 无法正常运行答案

【问题标题】：AngularJS UI Bootstrap DatePicker Not Functioning CorrectlyAngularJS UI Bootstrap DatePicker 无法正常运行
【发布时间】：2014-10-31 18:40:32
【问题描述】：

我有一个指令定义如下：

模板

<div class="date-picker">
    <div class="row">
        <div class="col-md-6">
            <label for="{{datePickerId}}">{{labelText}}</label>
            <p class="input-group">
                <input type="text"
                       id="{{datePickerId}}"
                       class="form-control"
                       datepicker-popup="{{format}}"
                       ng-model="dt"
                       is-open="opened"
                       datepicker-options="dateOptions"
                       disabled="disabled"
                       ng-required="true"
                       close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
    </div>
</div>

指令

//TypeScript

module MyApp.Directives {
    /** Scope for Messaging directive. */
    export interface IMaDatePickerScope extends ng.IScope {
        dt: Date;
        today(): void;
        clear(): void;
        disabled(date, mode): boolean;
        open($event): void;
        opened: boolean;
        dateOptions;
        formats: string[];
        format: string;
    }


    export class MaDatePicker implements ng.IDirective {
        restrict = "E";
        templateUrl = TEMPLATES + 'ma-date-picker.html';
        replace = true;
        transclude = true;
        scope = {
            labelText: '@',
            datePickerId: '='
        }
        link = (scope: IMaDatePickerScope) => {
            scope.today = () => {
                scope.dt = new Date();
            }
            scope.today();

            scope.clear = () => {
                scope.dt = null;
            }
            scope.disabled = (date: Date, mode) => {
                return (mode == 'day' && (date.getDay() === 0 || date.getDay() === 6)); //disable Saturday and Sunday
            }
            scope.open = ($event) => {
                $event.preventDefault();
                $event.stopPropagation();
                scope.opened = true;
            }

            scope.dateOptions = {
                formatYear: 'yy',
                startingDay: 1
            }

            scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
            scope.format = scope.formats[0];            
        }
        controller = ($scope: IMaDatePickerScope) => {

        }
    }
}

它取自the DatePicker section here，其功能应该类似于该页面上显示的弹出版本。但是，每当我单击日历按钮以启动指令时，日历都会以损坏的方式出现。此外，当我单击弹出日历中的“下个月”箭头时，日历会继续向左扩展。我的代码有问题吗？我没有为此添加任何样式，因为根据网站似乎没有任何样式，但我想在拆分现有样式之前检查代码是否有任何明显错误。

【问题讨论】：

你使用的是什么版本的库？
Angular v1.2.16 Angular UI Bootstrap 0.11.0
除了 ui-bootstrap 之外，您还包含 ui-bootstrap-tpls 文件吗？
@Ken 是的，我把它包括在内了。
还有其他建议吗？

标签： javascript angularjs twitter-bootstrap angular-ui angular-bootstrap

【解决方案1】：

没有看到你可能包含了哪些 CSS 文件，我不能确切地说出罪魁祸首是什么，尽管如果你使用 Twitter Bootstrap 以及除 Angular UI Bootstrap 之外的其他一些 CSS 库，你很可能会遇到样式冲突来自这些其他 CSS 文件中的一个或多个。我发现隔离这些问题的最简单方法是使用 Chrome 浏览器开发人员工具检查 CSS 覆盖及其来源，并查看冲突的确切位置，然后更新我的自定义 CSS 以修复它们。我不建议为了可维护性而修改诸如 Twitter Bootstrap 之类的 OTB CSS 库。始终使用您自己的自定义 CSS 文件。我确实在日期选择器上遇到了类似的问题，并且需要进行一些挖掘才能找到它们的位置。如果您的情况确实如此，那么使用多个 CSS 库是有风险的。狩猎愉快！

【讨论】：