Comment avoir au moins deux datpickers de ui-bootstrap sur une seule page?

Je veux avoir plusieurs datepickers sur une page. Mais avec la solution par défaut de UI-Bootstrap, ce n’est pas possible, personne ne peut ouvrir les datpickers. Le conflit les uns avec les autres. Voici mon code:

Je viens de faire un copier / coller du code datepicker du site http://angular-ui.github.io/bootstrap/#/datepicker . Ils sont en conflit les uns avec les autres. Lorsque je clique sur le champ pour ouvrir un datepicker, personne ne peut s’ouvrir correctement, les deux sont ouverts une seconde et disparaissent immédiatement.

Comment puis-je avoir plusieurs datepickers sur une seule page?

Plutôt que d’utiliser une fonction différente, vous pouvez utiliser un atsortingbut is-open différent, puis transmettre l’atsortingbut via la fonction ng-click . Vous avez toujours besoin de différents modèles:

 

Et à l’intérieur du contrôleur:

  $scope.open = function($event,opened) { $event.preventDefault(); $event.stopPropagation(); $scope[opened] = true; }; 

J’apprends toujours Angular et UI-Bootstrap, alors prenez en compte lors de la lecture de ma réponse. J’ai fait quelque chose de similaire à BlueMonk, mais d’une manière flexible qui empêche mon code de contrôleur de connaître les instances du datpicker sur la page.

Je mets tout le code datepicker dans mon contrôleur dans un seul espace de noms:

 $scope.datePicker = (function () { var method = {}; method.instances = []; method.open = function ($event, instance) { $event.preventDefault(); $event.stopPropagation(); method.instances[instance] = true; }; method.options = { 'show-weeks': false, startingDay: 0 }; var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; method.format = formats[0]; return method; }()); 

Et ensuite utilisé le balisage suivant:

 

Cela a fonctionné comme un charme pour moi.

Cela devrait fonctionner (différents modèles, drapeau ouvert et fonctions):

 

Et à l’intérieur du contrôleur:

  $scope.open1 = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened1 = true; }; $scope.open2 = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened2 = true; }; 

Aucun changement supplémentaire n’est nécessaire. Tant que vous encapsulez chaque entrée de date dans son propre contrôleur, la scope résidera avec cette entrée

Exemple:

 

Bien que ce soit une vieille question, mais répondre à quelqu’un qui tombe dans le même problème que moi.

J’ai atsortingbué le focuspicker à cet élément et ça a très bien fonctionné. Exemple de code

  $(document).on('focus','.datepicker',function(){ $(this).datepicker(); }); 

Voici ce qui a fonctionné pour moi: $ id est la scope id, fournie par angular.

  ctrl.opened = {}; ctrl.openDatatimePicker = function ($event, id) { $event.preventDefault(); $event.stopPropagation(); ctrl.opened[id] = true; }