AngularJS UI自舉的DatePicker不能正常工作

我已經定義爲指令如下：AngularJS UI自舉的DatePicker不能正常工作

模板

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

指令

//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) => { 

     } 
    } 
}

它是由the DatePicker section here採取和應該以像在該頁面上顯示的彈出版本一樣運行。但是，每當我點擊日曆按鈕啓動指令時，日曆就會以破碎的方式出現。此外，當我點擊彈出式日曆中的「下個月」箭頭時，日曆不斷向左擴展。我的代碼有問題嗎？我沒有添加任何樣式，因爲根據網站似乎沒有任何樣式，但我想在分離現有樣式之前檢查代碼是否有明顯錯誤。

來源

2014-10-31 muttley91

你使用的是什麼版本的庫？ – 2014-10-31 18:44:27

Angular v1.2.16 Angular UI Bootstrap 0.11.0 – muttley91 2014-10-31 18:55:50

您是否在ui-bootstrap之外還包含了ui-bootstrap-tpls文件？ – Ken 2014-10-31 19:34:35

沒有看到你可能包含哪些CSS文件，我不能確切地說出罪魁禍首是什麼，儘管如果你使用的是Twitter Bootstrap以及除了Angular UI Bootstrap之外的其他一些CSS庫，你很可能有風格與其他一個或多個其他CSS文件發生衝突。我找到解決這些問題的最簡單方法是使用Chrome瀏覽器開發工具來檢查CSS覆蓋及其來源，並確切瞭解衝突的位置，然後更新自定義CSS以修復它們。我不建議像Twitter Bootstrap一樣修改OTB CSS庫以實現可維護性。始終使用您自己的自定義CSS文件。我確實與日期選擇器有類似的問題，並花了一些時間來找出它們的位置。這是使用多個CSS庫的危險，如果這確實是你的情況。快樂狩獵！

來源

2014-11-04 17:15:54 bughunter1999

AngularJS UI自舉的DatePicker不能正常工作

回答

相關問題