Angulaire - UI-Bootstrap - DatePicker - Y a-t-il un moyen de détecter quand le mois a changé?

La portée de DatePicker a une propriété 'ActiveDateID' que vous pouvez regarder. Il change lorsque vous passez des mois.

Je pense que le meilleur moyen est de créer un «décorateur» sur la directive DatePicker afin de pouvoir y ajouter une fonctionnalité. Vous pouvez accéder à sa portée si vous remplacez la fonction "compile" de la directive. P>

Vous le faites dans un module.Config Fonction: p> xxx pré>

Modifier STRUT> P>

J'ai rencontré un problème avec le code similaire à celui où si vous changez le mois et que les 2 mois ont leur 1ère date le même jour, la montre $ ne tire pas. Vous pouvez contourner cela en regardant la valeur de la propriété 'Activedate' dans DatePicker's Controller: P>

            scope.$watch(function() {
              return ctrl.activeDate.getTime();
            }, function() {
              console.log('switched');
            });

mettre une montre $ sur le modèle Le sélecteur de date est lié à: xxx

Il est malheureux que la directive code> DatePicker Code> ne soit pas obligatoire pour suivre le changement de mois / année. Voici ce que j'ai proposé comme un travail autour.

dans le ... h3> xxx pré>

dans le contrôleur ... h3> xxx PRE>

Le décorateur h3> xxx pré>

un autre décorateur h3>

Voici un autre décorateur qui fonctionne également mais probablement un peu plus de ressources. Tout ce que je fais ici, c'est remplacer la méthode isactive () code> déjà utilisée dans la directive afin que ma méthode soit appelée à la place. Je ne pose que cela comme exemple des moyens possibles de travailler autour de certaines des restrictions dans des directives tierces. Je ne recommande pas nécessairement cette solution. P>

app.config(function($provide) {
    $provide.decorator('datepickerDirective', function($delegate) {
        var directive = $delegate[0],
            link = directive.link;

        angular.extend(directive.scope, { 'monthChanged': '&' });

        directive.compile = function() {
            return function(scope, element, attrs, ctrl) {
                link.apply(this, arguments);

                var activeMonth, activeYear, activeFn = scope.isActive;

                scope.isActive = function(dateObj) {
                    if (scope.datepickerMode == 'day' && !dateObj.secondary) {
                        var oldMonth = activeMonth, oldYear = activeYear,
                            newMonth = dateObj.date.getMonth() + 1;
                            newYear = dateObj.date.getFullYear();

                        if (oldMonth !== newMonth || oldYear !== newYear) {
                            activeMonth = newMonth;
                            activeYear = newYear;
                            scope.monthChanged({ '$month': newMonth, '$year': newYear });
                        }
                    }
                    activeFn(dateObj);
                };
            };
        };
        return $delegate;
    });
});

J'ai eu le même problème lorsque j'essayais de définir le modèle NG au premier jour de janvier lorsqu'ils sélectionnent une année. @Rob et @spongessuck Réponses me a vraiment aidé. C'est comme ça que j'ai résolu ça. Chaque fois que vous sélectionnez un an ou un mois, la variable activedate est définie. J'utilise SetVievevalue pour définir le modèle sur Activer en regardant la variable DatePickerMode qui change chaque fois que vous sélectionnez une année, un mois ou une date.

` xxx

`

espère que cela aide quelqu'un.