javascript - AngularJS - UI Bootstrap 日期选择器

Question

我是 AngularJS 新手。我想在我的项目中实现日期选择器。我使用 angular.min.js 版本 AngularJS v1.5.0-rc.1 ui-bootstrap-tpls-0.12.0.js 版本 0.12.0。我对网上的很多例子感到困惑。如何在 AngularJS 中实现日期选择器。我在我的应用程序中使用了以下代码。

app.directive('datepicker', function() {
return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat:'dd/mm/yy',
                onSelect:function (date) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });
                }
            });
        });
    }
}
});

在我的 HTML 页面中我这样使用。

<input type="text" ng-model="endDate" datepicker>

下面是得到的输出

我怎样才能解决这个问题？我一无所知。请帮助我解决这个问题。

提前致谢。

Answer 1

这是documentation用于 ui-bootstrap。

这是他们的 plunkr演示日期选择器的多种用途，包括内联日期选择器和弹出版本。

内联日期选择器的 HTML 应该看起来像这样

  <div style="display:inline-block; min-height:290px;">
      <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
    </div>

确保您在项目中正确加载/引用 ui-bootstrap 和 Angular。