Bootstrap Datepicker插件无法使用角度

时间:2016-07-06 17:18:50

标签: javascript jquery angularjs datepicker

这是我正在使用的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>

日历不再弹出。

3 个答案:

答案 0 :(得分:0)

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

请确保您已将jquery包含在angular

之上

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

答案 1 :(得分:0)

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

<强> 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;
    }
 };

答案 2 :(得分:0)

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

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