如何在angularjs中使用引導時間選擇器

Question

我正在使用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。 它給undefined作為它的值。

Answer 1

如果要使用引導程序中的時間選擇器，則可能需要將其包裝為指令。 默認情況下，您不會在$scope獲得所選日期，因為input的值是通過javascript代碼從外部更新的。 作為概念的證明，您可以參考下面的鏈接。

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

在此示例中， $scope.hello設置為Hello因此在UI中打印“ Hello World”。 hello值與UI中的input綁定，單擊按鈕可以更改該值，但該值不會反映在范圍中，並且仍會顯示“ Hello World”。

或者，如果您在input框中鍵入內容，則相同內容將反映在UI中。

我建議參考這個較早的線程，其中討論了幾乎相同的問題

如何將datetimepicker js包裝到AngularJS指令中

Answer 2

有一個功能豐富的庫，可無縫集成Bootstrap和AngularJS

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

您無需從頭開始編寫指令。 始終使用Angular first方法。

我希望這能幫到您。