how to use bootstrap timepicker with angularjs

Question

I am using Eonasdan datetimepicker. This is my code

<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>

And this js for timepicker

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

But in my controller I am not able to use $scope.dtime. It is giving undefined as its value.

Answer 1

There is a feature rich library that seamlessly integrates Bootstrap and AngularJS

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

Your don't need to write directives from scratch. Always use Angular first approach.

I hope this will help you.

Answer 2

if you want to use time picker from bootstrap you might want to wrap it a directive. By default you won't be getting the selected date in $scope since the value of input is updated externally by a javascript code. As a proof on concept you can refer to below link.

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

In this example $scope.hello is set as Hello hence printing "Hello World" in UI. Value of hello is bind with input in UI and on click of button you can change the value but same will not be reflected in scope and you will still see "Hello World" printed.

Alternatively if you type something in input box then the same will be reflected in UI.

I would suggest to refer to this earlier thread where pretty much same problem is discussed

How to wrap the datetimepicker js into AngularJS directive