如何将 Bootstrap Timepicker 与 AngularJS 一起使用

how to use bootstrap timepicker with angularjs

本文关键字：AngularJS 一起 Timepicker Bootstrap      更新时间：2023-09-26

我正在使用Eonasdan datetimepicker。这是我的代码

<div class="form-group">
    <div class='input-group date' id='datetimepicker'>
        <input type='text' ng-model="dtime" name="time" class="form-control"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</div>

而这个js用于时间选择器

<script type="text/javascript">
    (function () {
        $('#datetimepicker').datetimepicker({
            format: 'LT',
            enabledHours: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
        });
    })();
</script>

但是在我的控制器中，我无法使用$scope.dtime。它给出未定义作为其价值。

有一个功能丰富的库，可以无缝集成Bootstrap和AngularJS。

https://angular-ui.github.io/bootstrap/#/datepicker

您不需要从头开始编写指令。始终使用 Angular 优先方法。

我希望这对你有帮助。

如果你想使用引导程序的时间选择器，你可能想把它包装成一个指令。默认情况下，您不会获得$scope的所选日期，因为 input 的值是通过javascript代码在外部更新的。作为概念证明，您可以参考以下链接。

http://plnkr.co/edit/BEkkfwbhP7bYMtleQOzC?p=preview

在此示例中，$scope.hello设置为Hello因此在UI中打印"Hello World"。hello的值与 UI 中的input绑定，单击按钮时，您可以更改该值，但相同的值不会反映在范围内，您仍然会看到打印的"Hello World"。

或者，如果您在框中键入内容input则相同的内容将反映在UI中。

我建议参考这个较早的线程，其中讨论了几乎相同的问题

如何将日期时间选择器 js 包装到 AngularJS 指令中

相关文章：