CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapeonasdan-datetimepicker
Gopal Chandak
Gopal Chandak

Reputation: 385

how to use bootstrap timepicker with angularjs

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.

Upvotes: 1

Views: 4713

Answers (2)

Zahid
Zahid

Reputation: 98

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.

Upvotes: 2

S4beR
S4beR

Reputation: 1847

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

Upvotes: 1

Related Questions