Bootstrap datepicker directive for angularjs

Problem

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 :)

Problem courtesy of: Deepankar Bajpeyi

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.

Solution courtesy of: tennisgent

Discussion

There is a working native implementation in AngularStrap for Bootstrap3 that leverages ngAnimate from AngularJS v1.2+

You may also want to checkout:

If you prefer to keep relying on TwitterBootstrap javascript, there is the old version that just does that:

Discussion courtesy of: Olivier

This recipe can be found in it's original form on Stack Over Flow.