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

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

• javascript
• jquery
• twitter-bootstrap
• angularjs
• datepicker

2 Answers 2

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.

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

• Demo : http://mgcrea.github.io/angular-strap/##datepicker

You may also want to checkout:

• Source : https://github./mgcrea/angular-strap/blob/master/src/datepicker/datepicker.js

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

• Old docs: http://mgcrea.github.io/angular-strap/1.0/#/datepicker