I am rather new to clientside web development and am currently learning how to work with Typescript, Angular2(0.27) and bootstrap. I know that Angular2 is still in heavy development, but I ran into an issue, of which I am not sure what (technology) exactly is causing it. The problem has to do with the bootstrap v3 datetimepicker. More info on the widget in particular can be found here: http://ift.tt/19Kbd0E
The issue is that in Firefox (latest) and IE11 browser, the popup for the datetimepicker does not appear, if the datetimepicker code (html&js) is inside the angular2 application html, while in google chrome it works fine. For FF and IE11 it does work fine when I put the code in the index.html body directly.
This is the widget html I use:
<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>
The body in the index.html looks like this:
<body>
<my-app></my-app>
<script type="text/javascript">
System.config({
baseURL: '/'
});
System.import('~/app');
</script>
</body>
With the my-app referring to the angular2 application that produces the html containing the datetimepicker widget.
Any hints on what is causing this or how I could circumvent the issue? I tried putting the '.datetimepicker()' js call in code executed on window or doc load, but that didn't make any difference.
Aucun commentaire:
Enregistrer un commentaire