Bootstrap datepicker directive pour angularjs

J'ai écrit un simple datepicker directive. Voici le 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);
            });
        }
    }
});

Cela déclenche le datepicker si j'utilise <date-picker></date-picker> dans html.

Cependant dans la directive ci-dessus, la fonction de rappel pour l' onRender ne fonctionne pas. Je suis en utilisant le même exemple que Désactiver bootstrap dates

Ce que je fais mal ?

Merci 🙂

OriginalL'auteur Deepankar Bajpeyi | 2013-10-20

  1. 0

    La onRender fonction n'est pas un rappel, c'est un événement qui est déclenché. L'exemple qu'ils utilisent dans les docs que vous l'avez mentionné est:

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

    De sorte que vous devrait être l'ajout d'un écouteur d'événement, plutôt que de fournir une fonction de rappel. Faire quelque chose comme ceci:

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

    Les docs sont un peu flou sur ce qui est transmis dans le cadre de la 'onRender' événement, mais je suis sûr que cela devrait fonctionner. Si vous n'êtes pas passé à l'objet date, vous pourriez avoir à le lire à partir de l'entrée avant de formater.

    OriginalL'auteur tennisgent

  2. 0

    Il y a un travail implémentation native dans AngularStrap pour Bootstrap3, qui tire parti de ngAnimate de AngularJS v1.2+

    Vous pouvez également commander:

    Si vous préférez garder en s'appuyant sur TwitterBootstrap javascript, il est l'ancienne version qui ne vient que:

    OriginalL'auteur Olivier