CODEWITHSUNDEEP
javascripthtmlbootstrap-4calendarbootstrap-datepicker
Marcello Perri
Marcello Perri

Reputation: 620

bootstrap 4 datepicker, calendar icon don't show up

I am trying to use datapicker with Bootstrap 4, the input display correctly the big calendar where I can select the date, the date format is also correct as I expected, the only thing I can't display is the little calendar icon next to the input field. Can you please suggest?

Here is the code:

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>

Thanks

Upvotes: 0

Views: 7620

Answers (2)

Marcello Perri
Marcello Perri

Reputation: 620

I found the solution using font-awsome.css, without using input type="date" and only adding this html tag after the text input <i class="fa fa-calendar"></i>.

here is the code:

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>

Upvotes: 2

Gnanavel
Gnanavel

Reputation: 665

Try this

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

Upvotes: 0

Related Questions