Comment faire pour avoir au moins deux datepickers de l'interface utilisateur-bootstrap sur une seule page?
Je veux avoir plusieurs datepickers sur une page. Mais avec la solution par défaut de l'INTERFACE utilisateur de Bootstrap, il n'est pas possible, pas un de datepickers peut être ouvert. Le conflit les uns avec les autres. Voici mon code:
<div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
<button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
J'ai juste fait un copier/coller de la datepicker code à partir du site http://angular-ui.github.io/bootstrap/#/datepicker. Ils entrent en conflit les uns avec les autres. Lorsque je clique sur <input>
champ d'ouvrir un datepicker nul ne peut être ouvert correctement, les deux sont ouverts pour une deuxième et disparaissent immédiatement.
Comment puis-je avoir plusieurs datepickers sur une seule page?
- Vous devriez probablement de les affecter à différents ng-modèles.
- d'accord avec @aet et également utiliser une autre
is-open
variable pour chaque - Avez-vous trouvé la solution? Si oui, veuillez les décrire.
- La solution est d'utiliser une variable différente pour les
is-open
attribut. Si vous ne faites pas que de l'interface utilisateur-bootstrap choses ne peuvent pas suivre avec qui on est ouvert. @Vert devrait sélectionnez l'une des réponses ci-dessous que l'on a accepté la réponse. - double possible de Comment usemultiple Angulaire UI Bootstrap Datepicker dans un seul formulaire?
Vous devez vous connecter pour publier un commentaire.
Plutôt que d'utiliser une fonction différente, vous pouvez utiliser un autre
is-open
attribut, puis passer l'attribut par leng-click
fonction. Vous avez encore besoin de modèles différents:Et à l'intérieur de contrôleur:
is-open
champ<input type="text" id="startDate" ng-model="startDate" ng-click="start.opened = true" datepicker-popup="dd-MMM-yyyy" is-open="start.opened" />
$scope[opened] = !$scope[opened]
Je suis encore à apprendre Angulaire et de l'INTERFACE utilisateur-Bootstrap, donc en tenir compte lors de la lecture de ma réponse. J'ai fait quelque chose de similaire à BlueMonk, mais d'une manière souple qui garde mon code de contrôleur d'avoir à connaître sur les instances de la datepicker sur la page.
J'ai mis tout le datepicker de code dans mon contrôleur dans un seul espace de noms:
Et ensuite utilisé la balise suivante:
Cela a fonctionné comme un charme pour moi.
Cela devrait fonctionner (différents modèles, indicateur d'ouverture et de fonctions):
Et à l'intérieur de contrôleur:
open1($event)
etopen2($event)
fonctions.Voici ce qui a fonctionné pour moi:
$id est l'id de l'étendue, fournis par angulaire.
JS:
HTML:
Aucune des modifications Supplémentaires sont nécessaires. Tant que vous enveloppez chaque date d'entrée dans son propre contrôleur div le champ d'application sera en résidence avec entrée
Exemple:
something.startOn
,something.endOn
si les variables sont mises à la disposition sur le milieu de la portée. Sinon, c'est un truc assez cool avec les contrôleurs.si c'est une vieille question, mais answring pour quelqu'un qui chute au même problème que moi.
j'ai affecté le datepicker onfocus à cet élément et il fonctionnait super.
Exemple de code.
Pouvez ouvrir multi datepickers de l'interface utilisateur-bootstrap sur une seule page
JS
HTML