第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

bootstrap 4 datepicker,日歷圖標(biāo)不顯示

bootstrap 4 datepicker,日歷圖標(biāo)不顯示

Helenr 2023-03-24 14:16:54
我正在嘗試將數(shù)據(jù)選擇器與 Bootstrap 4 一起使用,輸入正確顯示大日歷,我可以在其中選擇日期,日期格式也如我所料正確,我唯一無法顯示的是旁邊的小日歷圖標(biāo)輸入字段。你能建議一下嗎?這是代碼: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貢獻(xiàn)1799條經(jīng)驗 獲得超8個贊

我找到了使用 font-awsome.css 的解決方案,沒有使用input type="date",只在文本輸入后添加了這個 html 標(biāo)簽<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>


查看完整回答
反對 回復(fù) 2023-03-24
?
慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗 獲得超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>


查看完整回答
反對 回復(fù) 2023-03-24
  • 2 回答
  • 0 關(guān)注
  • 303 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號