Search code examples
twitter-bootstrapwebbootstrap-datetimepickerangular

Angular2 - Bootstrap v3 datetimepicker issue in FF and IE

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: https://eonasdan.github.io/bootstrap-datetimepicker/

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.

Solution

  • Apparently the issue here is that in FF and IE the JS inside the html script blocks is not executed, if these html script blocks appear inside the Angular2 application html template. I'm not sure if this is something Angular2 could fix, or if it is just caused by the way chrome/opera parse/handle it differently than IE and FF.

    Either way, I now got it working by executing the datetimepicker code inside the constructor of my typescript Angular2 application. You need to reference the typescript definition file of the datetimepicker (bootstrap.v3.datetimepicker.d.ts) and jQuery and then make your application class constructor look something like this:

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

    At the constructor time of your application, the corresponding datetimepicker1 DOM element is available and the JS will be executed successfully no matter what (recent) browser you are using.