Bootstrap datepicker directive for angularjs

Question

I have written a simple datepicker directive. Here is the code :

appDirective.directive('datePicker', function() {
    return {
        restrict: 'E',
        require: ['ngModel'],
        scope: {
            ngModel: '='
        },
        replace: true,
        template:
            '<div class="input-group">'     +
                    '<input type="text"  class="form-control" ngModel required>' +
                    '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
            '</div>' ,
        link: function(scope, element, attrs) {
            var input = element.find('input');
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);
            console.log(now);
            console.log(nowTemp);

            input.datepicker({
               format: "yyyy-mm-dd",
                onRender: function(date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
            });

            element.bind('blur keyup change', function() {
                scope.ngModel = input.val();
                console.info('date-picker event', input.val(), scope.ngModel);
            });
        }
    }
});

This triggers the datepicker if I use <date-picker></date-picker> in html.

However in the above directive the callback for onRender doesn't work. I am using the same example as Disable bootstrap dates

What am I doing wrong here ?

Thanks :)

Solution

The onRender function isn't a callback, its an event that is fired. The example they use in the docs you referenced is:

$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
       ....
    }
});

So you should be adding an event listener, rather than supplying a callback function. Do something like this:

input.datepicker()
  .on('onRender', function(ev, date){
      return date.valueOf() < now.valueOf() ? 'disabled' : '';
});

The docs are a little fuzzy as to what exactly is passed along as part of the 'onRender' event, but i'm pretty sure that should work. If you aren't passed the date object, you might have to read it from the input before formatting it.