twitter bootstrap - icon - 각도 지시어가 포함 된 클릭 가능한 부트 스트랩-날짜 피커 아이콘



example twitter-bootstrap (2)

문제를 해결할 수있는 AngularStrap의 좋은 플러그인을 확인하십시오 : 링크 .

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>

데모보기 Plunker

그리고 이것은 그들의 메인 페이지입니다.

angularjs를 사용하고 있으며 달력 아이콘을 클릭 한 후 bootstrap-datepicker를 표시하려고합니다.
이제는 이렇게됩니다.

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


여기서 b-datepicker 는 사용자 정의 지시어입니다. 텍스트 필드에서 클릭하면 datepicker가 표시되지만 아이콘 클릭이 작동하지 않습니다.
출처 : http://jsfiddle.net/cPVDn/

내 목표는 다음과 같습니다.
http://jsfiddle.net/6QnMB/

나는 어떤 도움을 주셔서 감사합니다.

최신 정보:
해결책은 다음과 같습니다.
http://jsfiddle.net/cPVDn/53/


솔루션을 별도의 답변으로 게시하고 있습니다.

아이콘 클릭을 다음과 같이하지 않고 수행하려면 :

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

다음과 같은 것을 사용할 수 있습니다 :

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

해결책이있는 전체 내용 미리보기입니다 : http://jsfiddle.net/cPVDn/53/





datepicker