Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.