cliquable bootstrap-datepicker icône angulaire de la directive

Je suis en utilisant angularjs et je veux que mon bootstrap-datepicker pour être affiché après avoir cliqué dans l'icône du calendrier.

Maintenant c'est comme ça:

<div class="input-append date datepicker">
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span>
</div>

Où b-datepicker est de coutume de la directive. Cliquez dans le champ de texte affiche datepicker, mais l'icone ne fonctionne pas.

Voici les sources: http://jsfiddle.net/cPVDn/

Mon objectif est d'être comme ceci:

http://jsfiddle.net/6QnMB/

J'apprécie toute l'aide

Mise à JOUR:

Voici la solution:
http://jsfiddle.net/cPVDn/53/

merci de poster votre modifier comme réponse

OriginalL'auteur michal | 2013-08-02

1

Voir le bon plugin de AngularStrap qui permettra de résoudre votre problème: lien.

JS
```
.config(function($datepickerProvider) {
  angular.extend($datepickerProvider.defaults, {
    dateFormat: 'dd/MM/yyyy',
    startWeek: 1
  });
})
```
HTML
```
<input type="text"
    class="form-control"
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd"
    data-date-type="number" 
    data-min-date="02/10/86"
    data-max-date="today"
    data-autoclose="1" 
    name="date2"
    bs-datepicker>
```
Voir Démo Plunker

Et c'est leur page principale

J'ai utilisé angulaires-bootstrap dans mon projet et je ne veux pas mélanger ces deux, mais après Ta suggestion j'ai regardé dans les sources et est venu avec la solution. Merci!!!!
Cette réponse n'est pas la meilleure. La réponse à la question de la mise à JOUR est la vraie bonne réponse. Il utilise simplement une directive. Je pense qu'il serait bon d'avoir la solution ici, dans cette page.
droit, il a posté la modifier 10 mois plus tard. Mais encore, il utilise bootstrap-datepicker plugin
bootstrap-datepicker a été mentionné dans la question. Que la solution dans la mise à JOUR a seulement besoin d'ajouter des "b-datepicker" de la directive. Pour sûr que c'est une solution différente (donc il serait bon de le placer comme une réponse), et pour moi il est le meilleur. Le vôtre est une solution de rechange à l'aide de la AngularStrap lib, c'est ok.
d'accord, DONC la solution est plus simple, j'espère qu'il sera poste en tant que distincte de réponse

OriginalL'auteur Maxim Shoustin

Je poste la solution comme réponse distincte.

Pour faire cliquez sur l'icône de travail, au lieu de:

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
       el.datepicker();
     }
  };
})

on pourrait utiliser quelque chose comme:

directive('bDatepicker', function () {
return {
    restrict: 'A',
    link: function (scope, el, attr) {
        el.datepicker({});
        var component = el.siblings('[data-toggle="datepicker"]');
        if (component.length) {
            component.on('click', function () {
                el.trigger('focus');
            });
        }
    }
  };
})

Ici est plein extrait avec une solution:
http://jsfiddle.net/cPVDn/53/

OriginalL'auteur michal

Dans l'exemple de la bootstrap, documentation ils le font à peu près comme ceci:

<div class="input-append date datepicker">
  <input type="text" is-open="opened" datepicker-popup ng-model="date"/> 
  <span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span>
</div>

Et puis dans le contrôleur:

  $scope.openAction = function ($event) {

    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = !$scope.opened;   
}

OriginalL'auteur dxvargas

Vous devez vous connecter pour publier un commentaire.