AngularJS와 UI 부트 스트랩 DatePicker에서가 작동하지 올바르게

Question

I는 다음과 같이 정의 지시어는 다음 한 : 그것은 the DatePicker section here에서 가져옵니다 및 예상되는

//TypeScript 

module MyApp.Directives { 
    /** Scope for Messaging directive. */ 
    export interface IMaDatePickerScope extends ng.IScope { 
     dt: Date; 
     today(): void; 
     clear(): void; 
     disabled(date, mode): boolean; 
     open($event): void; 
     opened: boolean; 
     dateOptions; 
     formats: string[]; 
     format: string; 
    } 


    export class MaDatePicker implements ng.IDirective { 
     restrict = "E"; 
     templateUrl = TEMPLATES + 'ma-date-picker.html'; 
     replace = true; 
     transclude = true; 
     scope = { 
      labelText: '@', 
      datePickerId: '=' 
     } 
     link = (scope: IMaDatePickerScope) => { 
      scope.today =() => { 
       scope.dt = new Date(); 
      } 
      scope.today(); 

      scope.clear =() => { 
       scope.dt = null; 
      } 
      scope.disabled = (date: Date, mode) => { 
       return (mode == 'day' && (date.getDay() === 0 || date.getDay() === 6)); //disable Saturday and Sunday 
      } 
      scope.open = ($event) => { 
       $event.preventDefault(); 
       $event.stopPropagation(); 
       scope.opened = true; 
      } 

      scope.dateOptions = { 
       formatYear: 'yy', 
       startingDay: 1 
      } 

      scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
      scope.format = scope.formats[0];    
     } 
     controller = ($scope: IMaDatePickerScope) => { 

     } 
    } 
} 

템플릿

<div class="date-picker"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <label for="{{datePickerId}}">{{labelText}}</label> 
      <p class="input-group"> 
       <input type="text" 
         id="{{datePickerId}}" 
         class="form-control" 
         datepicker-popup="{{format}}" 
         ng-model="dt" 
         is-open="opened" 
         datepicker-options="dateOptions" 
         disabled="disabled" 
         ng-required="true" 
         close-text="Close" /> 
       <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
       </span> 
      </p> 
     </div> 
    </div> 
</div> 

지침 해당 페이지에 표시된 팝업 버전과 같은 기능을합니다. 그러나 캘린더 버튼을 클릭하여 지침을 시작할 때마다 캘린더는 깨진 방식으로 나타납니다. 또한 캘린더는 팝업 캘린더에서 '다음 달'화살표를 클릭하면 왼쪽으로 확장됩니다. 내 코드에 문제가 있습니까? 나는이 사이트에 어떤 스타일도없는 것처럼 보이기 때문에 어떤 스타일링도 추가하지 않았지만, 기존의 스타일링을 분해하기 전에 코드에 분명히 잘못된 것이 있는지 확인하고 싶었습니다.

Answer 1

어떤 CSS 파일을 보지 않고도 그 원인을 정확히 말할 수는 없지만 Angular UI Bootstrap 외에도 다른 CSS 라이브러리와 함께 Twitter Bootstrap을 사용하는 경우 스타일을 가질 가능성이 높습니다 하나 이상의 다른 CSS 파일과 충돌합니다. 이러한 문제를 해결하는 가장 쉬운 방법은 Chrome 브라우저 개발자 도구를 사용하여 CSS 재정의 및 소스를 검토하고 충돌 위치를 정확히 확인한 다음 맞춤 CSS를 업데이트하여 문제를 해결하는 것입니다. 유지 관리를 위해 Twitter Bootstrap과 같은 OTB CSS 라이브러리를 수정하지 않는 것이 좋습니다. 항상 사용자 정의 CSS 파일을 사용하십시오. 나는 날짜 선택 도구와 비슷한 이슈를 가지고 있었고, 그들이 어디에 있었는지 알아 내기 위해 조금 파고 들었다. 실제로 여러 상황에 해당하는 경우 여러 CSS 라이브러리를 사용할 때 위험합니다. 즐거운 사냥!