twitter bootstrap - ngx - icono de bootstrap-datepicker clicable con directiva angular

ngx bootstrap angular

Question

Estoy usando angularjs y quiero que mi bootstrap-datepicker se muestre después de hacer clic en el ícono del calendario.
Ahora es así:

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

Donde b-datepicker es una directiva personalizada. Haga clic en el campo de texto que muestra el marcador de fecha, pero el clic de icono no funciona.
Aquí hay fuentes: http://jsfiddle.net/cPVDn/

Mi objetivo es ser así:
http://jsfiddle.net/6QnMB/

Agradezco cualquier ayuda

ACTUALIZAR:
Aquí hay una solución :
http://jsfiddle.net/cPVDn/53/

Answer 1

En el ejemplo de la documentación de arranque, lo hacen de la siguiente manera:

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

Y luego en el controlador:

  $scope.openAction = function ($event) {

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

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

Answer 2

Estoy publicando solución como respuesta separada.

Para hacer que el icono haga clic en el trabajo en lugar de:

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

uno podría usar algo como:

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

Aquí hay un fragmento completo con la solución: http://jsfiddle.net/cPVDn/53/

Answer 3

Vea un buen complemento de AngularStrap que resolverá su problema: enlace .

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>

Ver Demo Plunker

Y esta es su página principal