CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-datepicker
phX
phX

Reputation: 63

Angularjs with Bootstrap-Datepicker: input not actively being recognized

I'm trying to create an AngularJS application using bootstrap-datepicker.

Here is my HTML:

<div id="test" class="input-append date">
  <input type="text" ng-model="datepicker.date" class="span4">
  <span class="add-on"><i class="icon-th"></i></span>
</div>
{{ datepicker.date }}

The last line is for debugging purposes. When this page is in action, the datepicker works fine and writes any date I pick into the input box. The issue is, as I click on a date, the {{ datepicker.date }} part does not show anything until I manually type something into the input box. I would like it to actively show any date I pick.

Here is an image trying to explain what's happening:

enter image description here

If possible, I would also like to type in my own input into the input box. Any selected dates would simply be added into the input box.

Upvotes: 2

Views: 672

Answers (1)

sjy
sjy

Reputation: 2732

See AngularJS and scope.$apply and the answer to this related SO question.

Your <input> is bound to datepicker.date, so when you update it directly by adding the 'x', {{datepicker.date}} is updated. When you close the datepicker, no changes are made to the <input> so AngularJS doesn't know to re-evaluate the expression. You need to call scope.$apply explicitly when the datepicker is closed.

Upvotes: 1

Related Questions