在 Bootstrap modal 中使用 Datetimepicker 套件，日曆位置跑版

如圖，日曆的位置飛起來了！經過我的測試他也不是每次都會跑版，如果把 input 位置向上挪一些就正常。

要解決這個問題可以在 input 的父層元素加上 CSS position: relative; 這樣日曆就不會亂跑了。
另外，我有試過指定 widgetParent 沒有作用。

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">日期</label>
                        <div style="position:relative">
                            <input type="text" class="form-control datepicker">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.datepicker').datetimepicker({
            "format":"YYYY-MM-DD",
            "locale":"zh-TW"
        });
    });
</script>

參考文件

• Bootstrap datetimepicker strange positioning on a different div altogether