anklickbare bootstrap-datepicker icon mit winkligen direktive

Question

Ich benutze angularjs und ich möchte meine bootstrap-datepicker nach dem Klicken in Kalender-Symbol angezeigt werden.
Jetzt ist es so:

<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> 

Wo b-datepicker benutzerdefinierte Richtlinie ist. Klicken Sie in das Textfeld zeigt Datumsauswahl, aber der Klick auf das Symbol funktioniert nicht.
Hier Quellen: http://jsfiddle.net/cPVDn/

Mein Ziel ist es, so zu sein:
http://jsfiddle.net/6QnMB/

I

UPDATE jede Hilfe zu schätzen wissen:
Hier Lösung:
http://jsfiddle.net/cPVDn/53/

Answer 1

Ich Lösung als separate Antwort veröffentlichen.

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

könnte man verwenden, so etwas wie:

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'); 
      }); 
     } 
    } 
    }; 
}) 

Hier ist voller Schnipsel mit Lösung: http://jsfiddle.net/cPVDn/53/

Answer 2

Siehe gutes Plugin von AngularStrap, das dein Problem lösen wird: link.

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> 

Siehe Demo Plunker

---

Und das ihr ist main page

Answer 3

Im Beispiel in bootstrap documentation sie tun es etwas wie folgt aus:

<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> 

Und dann in der Steuerung:

$scope.openAction = function ($event) { 

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

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