时间选择器无法在 bootstrap 上工作

Question

我有以下代码，但没有按预期工作。当我点击计时器图标时，没有任何反应。

<ul class="dropdown-menu customScroll" role="menu" aria-labelledby="btn-append-to-body" ng-show="!myVm.showETA">
    <li role="menuitem">
        <a href="#">Start Time
            <div class="input-group bootstrap-timepicker">
                <input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
                ng-model=myVm.startTime"
                ng-change="myVm.getETACount('startTime');myVm.applyFilterForResultCount()"
                />
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
        </a>
    </li>
    <li role="menuitem">
        <a href="#">End Time
            <div class="input-group bootstrap-timepicker timepicker">
                <input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
                ng-model="myVm.endTime"
                ng-change="myVm.getETACount('endTime');myVm.applyFilterForResultCount()"
                />
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
        </a>
    </li>
    <!--Clear div-->
    <li role="menuitem" ng-click="myVm.clearTimePicker()">
        <a href="#">
            <p>
                <span style="color:#40A8E2;">Clear</span>
                <span style="color:#333333;">  – ETA</span>
            </p>
        </a>
    </li>
    <script type="text/javascript">
        $('#timepicker1').timepicker();
        $('#timepicker2').timepicker();
    </script>
</ul>

Answer 1

不要尝试将常规 bootstrap.js 文件与 angular 一起使用，除非您知道如何编写指令。使用 angular 时，如果您需要对元素进行一些 DOM 操作或扩展标记或行为（事件处理程序），您应该使用指令。对于时间选择器，您可以只使用 ui-bootstrap angular 模块 https://angular-ui.github.io/bootstrap/#/timepicker 您需要包括常规 bootstrap.css 和 ui-bootrap -tpls.js 然后包含 ui-bootstrap 模块依赖项，您可以使用该指令。

时间选择器无法在 bootstrap 上工作

Time Picker not working on bootstrap

timepicker

twitter-bootstrap

angularjs