Twitter bootstrap Angular2-FF和IE中的引导v3日期时间选择器问题_Twitter Bootstrap_Web_Bootstrap Datetimepicker_Angular

Twitter bootstrap Angular2-FF和IE中的引导v3日期时间选择器问题

twitter-bootstrap web angular

Twitter bootstrap Angular2-FF和IE中的引导v3日期时间选择器问题,twitter-bootstrap,web,bootstrap-datetimepicker,angular,Twitter Bootstrap,Web,Bootstrap Datetimepicker,Angular,我对客户端web开发相当陌生，目前正在学习如何使用Typescript、Angular2（0.27）和bootstrap。我知道Angular2仍在大力开发中，但我遇到了一个问题，我不确定到底是什么（技术）导致了它。问题与引导v3日期时间选择器有关。有关该小部件的更多信息，请参见：问题在于，在Firefox（最新版本）和IE11浏览器中，如果datetimepicker代码（html&js）位于angular2应用程序html中，则datetimepicker的弹出窗口不会出现，而在goog

我对客户端web开发相当陌生，目前正在学习如何使用Typescript、Angular2（0.27）和bootstrap。我知道Angular2仍在大力开发中，但我遇到了一个问题，我不确定到底是什么（技术）导致了它。问题与引导v3日期时间选择器有关。有关该小部件的更多信息，请参见：

问题在于，在Firefox（最新版本）和IE11浏览器中，如果datetimepicker代码（html&js）位于angular2应用程序html中，则datetimepicker的弹出窗口不会出现，而在google chrome中，它可以正常工作。对于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>


$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
});

index.html中的正文如下所示：

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

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


System.config({
baseURL:“/”
});
系统导入（“~/app”）；

我的应用程序引用angular2应用程序，该应用程序生成包含datetimepicker小部件的html

关于是什么导致了这一问题，或者我如何规避这一问题，有什么提示吗？我尝试将“.datetimepicker（）”js调用放入在窗口或文档加载时执行的代码中，但这没有任何区别。

显然，这里的问题是，在FF和IE中，如果这些html脚本块出现在Angular2应用程序html模板中，则不会执行html脚本块中的js。我不确定Angular2是否能够解决这一问题，或者这只是因为chrome/opera解析/处理它的方式与IE和FF不同

不管怎样，我现在都是通过在我的typescript Angular2应用程序的构造函数中执行datetimepicker代码来实现的。您需要引用datetimepicker（bootstrap.v3.datetimepicker.d.ts）和jQuery的typescript定义文件，然后使应用程序类构造函数如下所示：

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

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

在应用程序的构造时，相应的datetimepicker1 DOM元素可用，并且无论您使用的是哪种（最新的）浏览器，JS都将成功执行。

更“轻量级”的解决方案是将初始化放入ngAfterViewInit。因此，在呈现DOM之后，将找到jQuery选择器

导出类YourComponent在ViewInit之后实现{…

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

自我回答。干得好）有没有办法从风格的角度来定制这个日历？如果有，请给我链接。