引导日期选择器插件不适用于角度

Bootstrap Datepicker plugin not working with angular

本文关键字：适用于 不适用 插件 日期 选择器      更新时间：2023-09-26

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

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

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

日历不再弹出。

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

只要确保你已经包含了你的jquery在角度之上

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

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

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

此代码不起作用ready因为加载视图后未触发事件

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

相关文章：