为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap 4 datepicker,日历图标不显示

bootstrap 4 datepicker,日历图标不显示

Helenr 2023-03-24 14:16:54
我正在尝试将数据选择器与 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>
查看完整描述

2 回答

?
守着星空守着你

TA贡献1799条经验 获得超8个赞

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


这是代码:


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>


查看完整回答
反对 回复 2023-03-24
?
慕桂英3389331

TA贡献2036条经验 获得超8个赞

尝试这个


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


查看完整回答
反对 回复 2023-03-24
  • 2 回答
  • 0 关注
  • 186 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信