2013-08-02 3 views
5

나는 angularjs를 사용하고 있으며 캘린더 아이콘을 클릭 한 후 내 bootstrap-datepicker를 표시하려고합니다.
는 이제 다음과 같이이다 : b-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> 


입니다. 텍스트 필드에서 클릭하면 datepicker가 표시되지만 아이콘 클릭이 작동하지 않습니다.
여기 소스 : http://jsfiddle.net/cPVDn/

내 목표는 다음과 같이 될 것입니다 : 내가 어떤 도움을 주셔서 감사합니다
http://jsfiddle.net/6QnMB/

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

,691 :
다음 솔루션입니다
+0

답변으로 당신의 편집을 게시하시기 바랍니다 :

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

솔루션 전체 조각입니다 :

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

하나가 같은 것을 사용할 수 있습니다

아이콘 클릭 작업 대신을 만들려면 –

답변

1

문제를 해결할 수있는 AngularStrap의 플러그인을 확인하십시오 : 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> 

참조 데모 Plunker


그리고이 자신의 bootstrap documentation의 예에서 main page

+0

저는 프로젝트에서 앵귤러 부트 스트랩을 사용했는데이 두가지를 섞어 놓고 싶지는 않습니다.하지만 제 제안을 본 후에 보았습니다. 정보원에 들어가 솔루션을 찾았습니다. 고맙습니다! – michal

+0

이 답변은 최선이 아닙니다. 문제의 UPDATE 답변이 가장 좋은 답변입니다. 단순히 지침을 사용합니다. 나는이 페이지에서 그 해결책을 가지고있는 것이 좋을 것이라고 생각한다. – dxvargas

+0

오른쪽으로 @hiphip, 그는 10 개월 후 편집을 게시했습니다.하지만 그는'bootstrap-datepicker' 플러그인을 사용합니다. –

0

그들은 다소 다음과 같이 할 수있다 :

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

그리고 다음을 컨트롤러에 : 나는 별도의 답변으로 솔루션을 게시하도록하겠습니다

$scope.openAction = function ($event) { 

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

    $scope.opened = !$scope.opened; 
} 
관련 문제