icona clickstrap-datepicker cliccabile con direttiva angolare

Question

Sto usando angularjs e voglio che il mio bootstrap-datepicker venga mostrato dopo aver cliccato sull'icona del calendario.
Ora è come questo:

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

Dove b-datepicker è direttiva personalizzato. Fare clic nel campo di testo mostra datepicker, ma il clic sull'icona non funziona.
Ecco fonti: http://jsfiddle.net/cPVDn/

Il mio obiettivo è quello di essere come questo:
http://jsfiddle.net/6QnMB/

Apprezzo tutto l'aiuto

UPDATE:
Ecco soluzione:
http://jsfiddle.net/cPVDn/53/

Answer 1

sto postando una soluzione come risposta separata.

Per rendere icona click lavoro invece di:

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

si potrebbe usare qualcosa come:

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

Qui è pieno frammento con la soluzione: http://jsfiddle.net/cPVDn/53/

Answer 2

Vedere il buon plugin di AngularStrap che risolverà il problema: link.

JS

.config(function($datepickerProvider) { 
    angular.extend($datepickerProvider.defaults, { 
    dateFormat: 'dd/MM/yyyy', 
    startWeek: 1 
    }); 
}) 

Copia

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

See Demo Plunker

---

E questo È il loro main page

Answer 3

Nell'esempio in bootstrap documentation lo fanno un po 'come questo:

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

E poi nel controller:

$scope.openAction = function ($event) { 

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

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