bootstrap 4 datepicker，日历图标未显示

如何解决bootstrap 4 datepicker，日历图标未显示

我正在尝试将数据选择器与Bootstrap 4配合使用，输入正确显示了可以选择日期的大日历，日期格式也符合我的预期，我唯一无法显示的是小日历图标输入字段旁边。你能建议吗？

代码如下：

document.addEventListener('DOMContentLoaded',function(e) {
    $('[name="date"]')
        .datepicker({
            format: 'dd/mm/yyyy'
        })
        .on('changeDate',function(e) {
            // do somwthing here
        });
});

<html>
<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">

</head>
<body>
    <form id="demoForm" action="success.html" method="POST">
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Date</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="date" />
            </div>
        </div>
     </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>

谢谢

解决方法

尝试一下

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <form id="demoForm" action="success.html" method="POST">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Date</label>
                <div class="col-md-4">
                    <input type="date" class="form-control" name="date" />
                </div>
            </div>
         </form>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>

我找到了使用font-awsome.css的解决方案，而不使用input type="date"，仅在文本输入<i class="fa fa-calendar"></i>之后添加了这个html标签。

代码如下：

document.addEventListener('DOMContentLoaded',function(e) {
    $('[name="date"]')
        .datepicker({
            format: 'dd/mm/yyyy'
        })
        .on('changeDate',function(e) {
            // do somwthing here
        });
});

.fa {
    position: absolute;
    right: 25px;
    top: 11px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

<html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    </head>
    <body>
        <form id="demoForm" action="success.html" method="POST">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">Date</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="date" />
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
         </form>
         
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

    </body>
    </html>