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

回答

相关问题