current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
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.
up vote 1 down vote favorite
1

In short, I need to find a way to update ng-model when using bootstrap-datepicker. Here is a plunker I made to demonstrate what is going on http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=preview. I've tried searching around and am fairly positive that I need to use a directive to pass a value to the model. Typing something in the text box will update the selected date model, but just using the datepicker does nothing. The below directive seemed like it should work but unfortunately it doesn't seem to have much of an effect.

app.directive('datepicker', function() {
    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attrs, ngModelCtrl) {
            $(function() {
                element.datepicker({
                    dateFormat : 'dd/mm/yy',

                    onSelect : function(date) {

                        ngModelCtrl.$setViewValue(date);

                        element.datepicker("setDate", date);

                        scope.$apply();

                    }
                });
            });
        }
    }
});

An easy solution would be to just use another datepicker, but unfortunately due to restrictions on how many external libraries I can use this is the datepicker I have to use. Any insight would be greatly appreciated!!!

share|improve this question
3  
Have you looked at UI-Bootstrap? angular-ui.github.io/bootstrap –  Mike Robinson Jul 3 '14 at 14:33
    
That is what I was originally using, but the style of the calendar did not fit with our website and it was causing a few issues with in-line editing so we scrapped it and are trying to use the datepicker that comes with the theme we are using to keep things simple. –  JDubs Jul 3 '14 at 15:14

1 Answer 1

up vote 2 down vote accepted

I strongly recommend using UI-Bootstrap or something similar.

But for those that need to use Bootstraps date-picker for whatever reason here is a starting place using your directive, with a few changes:

app.directive('datepicker', function() {
   return {
      restrict: 'A',
      require: 'ngModel',
      compile: function() {
         return {
            pre: function(scope, element, attrs, ngModelCtrl) {
               // Initialize the date-picker
               $(element).datepicker({
                  format: 'dd/mm/yyyy'
               }).on('changeDate', function(ev) {
                  // Binds the changes back to the controller
                  // I also found that event.format() returns the string
                  // I wasn't aware of that. Sure beats using the date object and formatting yourself.
                  ngModelCtrl.$setViewValue(ev.format('dd/mm/yyyy'));

                  // I HATE using $apply, but I couldn't get it to work without
                  scope.$apply();
               });
            }
         }
      }
   }
});

HTML:

<input type="text" datepicker="" ng-model="date" />

Very simple and straightforward and allows you to reuse, here is a working plunker

share|improve this answer
    
Argh, this seems so simple and looks like it should work but I can't get it to work in the plunker I have for whatever reason. I'm probably doing something silly. –  JDubs Jul 3 '14 at 15:16
    
Hmm, well for some reason I can't get your plunker to even open right now. I'll keep trying and take a look at it and let you know if there is anything I see. –  Asok Jul 3 '14 at 15:21
    
Hmmmm, well, for some reason it seems that you need to use the top datepicker before the bottom one works. I stripped the actual page I'm working on to get it looking nice for a plunker, but all of the bsic functionality is there. –  JDubs Jul 3 '14 at 15:35
    
The only thing I see is that you are missing class='date-picker' so the document on ready isn't called on the second date selector. I added that and it worked fine onload –  Asok Jul 3 '14 at 15:59
    
@JDubs Got it working in your directive, Here's my plunker, Let me know what you think. I will change my answer to reflect this in a few minutes. –  Asok Jul 3 '14 at 16:38

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.