Question

这是我正在使用的html代码：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" data-ng-model="dateOfCal" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

这适用于index.html，但是当我将此代码移动到

访问的html页面时

<div ng-view=''></div>

日历不再弹出。

Answer 1

尝试将jquery代码移动到加载ng-view的控制器。它肯定会起作用。

请确保您已将jquery包含在angular

之上

建议您可以使用ui-bootstrap（https://angular-ui.github.io/bootstrap/），它为datepicker内置了角度JS指令，以及您可以在项目中使用的更多内容

Answer 2

试试这个可能会对你有帮助，

<强> HTML

<div class="col-sm-6">
  <div class="form-group">
    <label>Birth Date</label>
    <p class="input-group">
    <input type= "text" class="form-control" placeholder="MMM DD,YYYY" ng-model="birthDate" datepicker-popup="MMM dd,yyyy"
                             is-open="birthDatePicker.opened" datepicker-options="dateOptions" close-text="Close"/>
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="birthDatePicker.toggle()">
                             <i class="fa fa-calendar"></i>
      </button>
    </span>
    </p>
  </div>
</div>

<强> JS

$scope.birthDatePicker = {
     opened: false,
     toggle: function () {
     this.opened = !this.opened;
    }
 };

Answer 3

此代码无效，因为加载视图后未触发ready事件

请在控制器内的最后一行写下此代码$('#datetimepicker1').datetimepicker();，以便初始化datepicker。

Bootstrap Datepicker插件无法使用角度

3 个答案: