Search code examples
javascriptcsstwitter-bootstrapdatetimepickereonasdan-datetimepicker

Bootstrap DateTimePicker (Eonasdan) not showing

I'm using Bootstrap v3 and would like to use the DateTimePicker from Eonasdan. I already used it in other project with no problems. My problem now is that the DateTimePicker is not showing up when clicking on the input box. The input box is there and the date is displayed in the input box. It is only the Picker not popping up. Here is my code:

HTML:

<div class="col-md-10" id="mSearchValueInput">
    <input id="mSearchValue" type="text" class="form-control date">
</div>

JavaScript:

<script type="text/javascript">
    $(function () {
        $('#mSearchValue').datetimepicker();
    });
</script>

The libraries are in the correct order (I think) and they are in their original state:

<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/moment-with-locales.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>

CSS:

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

Still, I don't know what I'm doing wrong. In all my other projects, it just worked like this.

Maybe someone here has an idea?

Thanks

Solution

  • As described by @VincenzoC in one of the comments, there is an issue at the moment with jQuery v3 and the last version of the DateTimePicker (4.17.37).

    They suggest using jquery-migrate-3.0.0.js, which I did not try. There is a pull request which fixed the issue for me by editing the JavaScript code in bootstrap-datetimepicker.js.