bootstrap 4 日期选择器、日历图标不显示

Question

我正在尝试将数据选择器与 Bootstrap 4 一起使用，输入正确显示大日历，我可以在其中 select 日期，日期格式也如我所料正确，唯一的问题我无法显示输入字段旁边的小日历图标。你能推荐一下吗？

代码如下：

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>

谢谢

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

Answer 2

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

代码如下：

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>

bootstrap 4 日期选择器、日历图标不显示

bootstrap 4 datepicker, calendar icon don't show up

html

javascript

calendar

bootstrap-datepicker

bootstrap-4