Bootstrap Angular Datepicker 不工作答案

【问题标题】：Bootstrap Angular Datepicker is not workingBootstrap Angular Datepicker 不工作
【发布时间】：2016-01-21 20:38:30
【问题描述】：

我正在使用来自https://angular-ui.github.io/bootstrap/#/datepicker 的代码示例，当我尝试将其集成到应用程序时，开发人员控制台中没有错误。

$scope.open = function($event) {
   $scope.status.opened = true;
};

html:

<p class="input-group">
    <input type="text" class="form-control" 
           uib-datepicker-popup="{{format}}" 
           ng-model="PublishedDate" 
           is-open="status.opened" 
           show-weeks="true" 
           class="well well-sm" 
           custom-class="getDayClass(date, mode)" 
           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>

此方法在控制器中执行并设置$scope.status.opened = true;，但不显示日历。有人可以说我哪里做错了吗？

【问题讨论】：

你可以为你的日期选择器包含你的 html 吗？
在 $scope.open 方法中，添加$event.stopPropagation() 和$event.preventdefault()，它可能会起作用...我在许多网站上都找到了相同的解决方案。

标签： angularjs calendar angular-ui-bootstrap

【解决方案1】：

js:

$scope.dt = new Date(); // will return a new date object with the current date and time

html:

<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>

还记得在你的角度模块中初始化它：

angular.module('theNameOfYourAngularFormsApp', ['ui.bootstrap']);

【讨论】：

我能知道js中的toDate是什么
新日期（）；将返回具有当前日期和时间的新日期对象。您可以在 [这里](w3schools.com/js/js_dates.asp 了解有关 Date 对象的更多信息

【解决方案2】：

与上面sjokkogutten的答案基本相同。

uib-datepicker-popup 的 ng-model 需要设置或初始化为 JavaScript Date 对象。

字符串不起作用 :( 确保您的控制器看起来像这样

$scope.PublishedDate = new Date();

所有关于如何初始化为特定值https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date的知识

还可以查看此答案以获得更多帮助。 How to usemultiple Angular UI Bootstrap Datepicker in single form?

【讨论】：