bootstrap 4 datepicker，日历图标不显示答案

【问题标题】：bootstrap 4 datepicker, calendar icon don't show upbootstrap 4 datepicker，日历图标不显示
【发布时间】：2020-09-25 10:10:35
【问题描述】：

我正在尝试将数据选择器与 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>

谢谢

【问题讨论】：

为什么要使用额外的引导日期选择器？引导 4 默认日期选择器很好，看起来类似于引导日期选择器。只需写 <input type='date'/>
老实说我不知道，你能提供代码吗？
我在下面添加了我的答案
@MarcelloPerri 使用type=date 仅当您想发送日期后端时才适合您dd/mm/yyyy - input type="date" us yyyy/mm/dd 的默认格式跨度>
在将信息存储到数据库之前，我总是可以在 PHP 中格式化日期，但关键是日历图标没有显示在引导数据选择器中。

标签： javascript html bootstrap-4 calendar bootstrap-datepicker

【解决方案1】：

试试这个

<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>

【讨论】：

是的，但是在数据库中，日期将仅以 yyyy-mm-dd 格式存储。那么我认为这不会有问题。

【解决方案2】：

我使用 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>

【讨论】：