Angular2 - FF和IE中的Bootstrap v3 datetimepicker問題

我對客戶端web開發頗爲陌生，目前正在學習如何使用Typescript，Angular2（0.27）和bootstrap。我知道Angular2仍處於繁重的發展階段，但我遇到了一個問題，我不確定究竟是什麼（技術）導致了它。問題與bootstrap v3 datetimepicker有關。上特別是小部件的更多信息可以在這裏找到：https://eonasdan.github.io/bootstrap-datetimepicker/Angular2 - FF和IE中的Bootstrap v3 datetimepicker問題

的問題是，在Firefox（最新）和IE11瀏覽器，爲的DateTimePicker彈出不會出現，如果的DateTimePicker代碼（HTML & JS）是在angular2應用html裏面，而在谷歌瀏覽器中它工作正常。對於FF和IE11，當我直接將代碼放入index.html主體時，它確實工作正常。

這是小工具的HTML我使用：

<div class="container"> 
    <div class="row"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input placeholder="RAW" type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker1').datetimepicker(); 
     }); 
     </script> 
    </div> 
</div>

在index.html的身體看起來是這樣的：

<body> 
<my-app></my-app> 
<script type="text/javascript"> 
    System.config({ 
     baseURL: '/' 
    }); 
    System.import('~/app'); 
</script> 
</body>

隨着我的應用程序內指的是產生的angular2應用包含datetimepicker小部件的html。

任何提示什麼是造成這種情況或我如何繞過這個問題？我試着把'.datetimepicker（）'的js調用放在window或doc加載的代碼上執行，但是這沒有什麼區別。

來源

2015-06-19 BasiK

顯然這裏的問題是在FF和IE中，html腳本塊內的JS沒有執行，如果這些html腳本塊出現在Angular2應用程序的html模板中。我不確定這是Angular2能夠修復的問題，還是僅僅是由於Chrome/Opera解析/處理它的方式與IE和FF不同而引起的。

無論哪種方式，我現在通過在我的打字稿Angular2應用程序的構造函數中執行datetimepicker代碼來工作。你需要引用的DateTimePicker（bootstrap.v3.datetimepicker.d.ts）的打字稿定義文件和jQuery，然後讓你的應用程序類的構造函數是這個樣子：

constructor() { 
    $(function() { 
     $('#datetimepicker1').datetimepicker({ 
      format: 'DD/MM/YYYY HH:mm' 
     }); 
     console.log('executed datetimepicker from angular2 app constructor'); 
    }); 
}

在你的應用程序的構造時間，相應的datetimepicker1 DOM元素可用，無論您使用哪種（最新）瀏覽器，JS都會成功執行。

來源

2015-06-20 14:28:52 BasiK

自我回答。好工作） –

有沒有什麼辦法從風格的角度定製這個日曆？如果是的話請給我鏈接。 –

更「輕量級」的解決方案是將初始化放入ngAfterViewInit。所以jQuery選擇器將被找到，之後 DOM被呈現。

export class YourComponent implements AfterViewInit { ...

ngAfterViewInit(): void { 
    $('#datetimepicker1').datetimepicker({ 
      format: 'DD/MM/YYYY HH:mm' 
    }); 
}

來源

2017-02-01 14:17:31 Reto

Angular2 - FF和IE中的Bootstrap v3 datetimepicker問題

回答

相關問題