javascript - Bootstrap-datepicker 不显示

Question

我查过这个问题，我知道它已经得到回答，但其他答案似乎都不适合我。

我认为这可能与页面上的所有 javascript 有关。

这是我的 HTML 代码:

<div class="form-group">
    <label for="birthday">Birthday</label>
    <input type="text" class="form-control" name="birthday" id="birthday" >
</div>

如果我从输入中删除生日 ID 并将其添加到 div，日历在输入下始终可见，但是当我点击输入时没有任何反应

我将包含我所有的 JS 代码，以防您看到冲突这是我的 JS 代码:

<!-- Loading Image Picker -->
<script src="../imgPicker/assets/js/jquery-1.11.0.min.js"></script>
<script src="../imgPicker/assets/js/jquery.Jcrop.min.js"></script>
<script src="../imgPicker/assets/js/jquery.imgpicker.js"></script>

<!-- Menu Toggle Script -->
<script>
    $(document).ready(function() {
        $('[data-toggle=offcanvas]').click(function() {
            $('.row-offcanvas').toggleClass('active');
        });
    });
</script>

<!-- Bootstrap Select Script -->
<script src="../assets/js/bootstrap-select.js"></script>
<script>
    $(document).ready(function() {
        $("select").selectpicker({style: 'btn btn-default', menuStyle: 'dropdown-inverse'});
    });
</script>

<!-- Bootstrap Datepicker Script -->
<script src="../vendor/datepicker/js/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function() {
        $('#birthday').datepicker({
            autoclose: true
        });
    });
</script> 

<!-- Upload Avatar Script -->   
<script> 
    $(function() {
        var time = function(){return'?'+new Date().getTime()};

        // Avatar setup
        $('#avatarInline').imgPicker({
            url: '../imgPicker/server/upload_avatar.php',
            aspectRatio: 1,
            // We use the loadComplete to set the image
            loadComplete: function(image) {
                // Set #avatar image src
                $('#avatar').attr('src', image.name / image.versions.avatar.url);
            },
            deleteComplete: function() {
                $('#avatar').attr('src', 'avatar/avatar.png');
                this.modal('hide');
            },
            cropSuccess: function(image) {
                $('#avatar').attr('src', image.versions.avatar.url);
                this.modal('hide');
                location.reload();
            }
        });
    }); 
</script>

<!-- Update Avatar Script -->
<script>
    function updateAvatar(object){  
        $.ajax({
            url: 'update-avatar.php',
            data: 'avatartype=' + object.value,
            cache: false,
            error: function(e){
                alert(e);
            },
            success: function(response){
                // Reload the page to refresh data from database
                location.reload();
            }
        });   
    }
</script>

<script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>

如果在 JSFiddle 中添加我需要的确切代码，一切似乎都运行良好，但由于某种原因，我无法在我的代码中运行它。

有人可以帮忙吗？

编辑:我想我已将其缩小为 CSS 问题。我正在使用 Flat UI当我从我的代码中删除它时，一切似乎都正常，但我想继续使用 Flat UI。有人一起使用过 Flat UI 和 Bootstrap datepicker 吗？或者有人知道我该如何解决这个问题吗？

这是一个JSFiddle的问题。

Answer 1

您是否在此处检查了日期选择器文档:

Bootstrap Date Picker Docs

看起来您缺少一些关键功能，例如:

<input class="datepicker" data-date-format="mm/dd/yyyy">
<input data-provide="datepicker">

看起来您可以使用“数据属性”，而不是您已完成的所有脚本。我还想知道输入类型是否应该等于“日期”。

<input type="date" class="form-control" name="birthday" id="birthday" >

这将触发 HTML5 日期选择器。不知道这是否有必要，但我建议重新访问文档。如果没有设置 fiddle ，很难查找脚本冲突，但即使您有它们，日期选择器文档也会为您提供“无冲突模式”。

试试吧!